JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<picture class="w-picture ui-picture_2i5 w-db2bf8b46bc363bbed9387e157081d5f" data-wrapper-id="fdd3aa5f-9d73-49a5-9cf5-6aa8b08071cc" data-component="picture" data-imagetype="image" data-fallbackurl="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396" data-images="[]" data-was-processed="true">

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

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

<img alt="Illustration" aria-label="Illustration" data-fallback-url="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396" class="w-picture__image ui-image_3aJ w-ddcc310ab79db79b65faaa0013f426e1" src="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396.webp">

</picture>

JavaScript

$("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, data-fallback-url', $(this).attr("src, data-fallback-url").replace(/_optimized_[\d]{4}/, '')); });