jquery find and remove specific string on links

i've some <picture> balises in my website with several links inside them. In each <picture> balise, all these links are for the same img, my goal is to remove a specific string from all these links that you can find in:

data-fallbackurl="..." in <Picture>
srcset="..." in <source>
src="..." in <img>

they're a lot of answered questions to achieve this, but i tried to use the one i understood:

jquery find specific word on src and remove it

to build this jquery code who can certainly be written in one line:

$("picture").each(function(){ $(this).attr('data-fallbackurl', $(this).attr("data-fallbackurl").replace(/_optimized_[\d]{4}/, '')); });


$("source").each(function(){ $(this).attr('srcset', $(this).attr("srcset").replace(/_optimized_[\d]{4}/, '')); });


$("img").each(function(){ $(this).attr('src', $(this).attr("src").replace(/_optimized_[\d]{4}/, '')); });

who works fine in jsfiddle only:

https://jsfiddle.net/kodjoe/yroqhsLn/1/

But not in my website. I only find the way to write something for links with 4 digits after _optimized_, but i don't know how to write something who will remove _optimized_ and everything after it when links have 4 digits or more.

Here is a part of code that you can find in my website:

<picture data-fallbackurl="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

<source media="(min-width: 768px) and (max-width: 991px)" srcset="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

<source media="(max-width: 767px)" srcset="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

<img data-fallback-url="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396"  src="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396.webp">

</picture>

Here is a different part of code that you can find in my website:

<picture data-fallbackurl="5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0" data-images="[]" data-was-processed="true">

<source media="(min-width: 768px) and (max-width: 991px)" srcset="/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0">
    
<source media="(max-width: 767px)" srcset="5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0">

<img data-fallback-url="5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0" src="5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0.webp">


</picture>

As you can see, each time i need to remove _optimized_ and everything after it. Sometime is only 4 digits, but sometime it could be more like _optimized_1520_c1520x855-0x0.webp

UPDATE

thanks to IT goldman, it works fine with this new code but if someone know how to write it in one line it would be awesome:

$("picture").each(function(){ $(this).attr('data-fallbackurl', $(this).attr("data-fallbackurl").replace(/_optimized_.*/, '')); });

$("source").each(function(){ $(this).attr('srcset', $(this).attr("srcset").replace(/_optimized_.*/, '')); });

$("img").each(function(){ $(this).attr('src', $(this).attr("src").replace(/_optimized_.*/, '')); });

Solution

This is the regex that you need: /_optimized_.*/ which means _optimized_ and every character . many times *

Better than one line, I will make a readable non repetitive code.

function cleanOptimizedAttributes(elem, attr) {
  elem.setAttibtue(attr, (elem.getAttribute(attr) || "").replace(/_optimized_.*/, ''))
}

document.querySelectorAll("picture, source, img").forEach(function(elem) {
  ['data-fallbackurl', 'srcset', 'src'].forEach(function(attr) {
    cleanOptimizedAttributes(elem, attr);
  })
})

Update: Here's the fixed code:

// you can one-line this by deleting the new-line characters
document.querySelectorAll("picture, source, img").forEach(function(elem) {
  ['data-fallbackurl', 'srcset', 'src'].forEach(function(attr) {
    elem.getAttribute(attr) && elem.setAttribute(
      attr,
      elem.getAttribute(attr).replace(/_optimized_.*/, '')
    );
  });
});

console.log(document.querySelector("picture").outerHTML);

.as-console-wrapper {
  min-height: 100%
}

<picture data-fallbackurl="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

  <source media="(min-width: 768px) and (max-width: 991px)" srcset="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

  <source media="(max-width: 767px)" srcset="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

  <img data-fallback-url="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396"  src="5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396.webp">

</picture>