Заменить динамическое ключевое слово из содержимого HTML с помощью jQuery

Question

<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>

Я хочу заменить /cache/713229083fb198/ из атрибута IMG и загрузить это изображение снова.

С

https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png

до

https://static.domain.com/media/catalog/product/h/a/123.png

Я хочузаменить его с помощью jQuery.

Answer 1

Используйте .attr( function ) для изменения src атрибута изображения.В функции используйте регулярное выражение в .replace() для сопоставления целевой части строки.

$(".fotorama__img").attr("src", function(i, src){  
  return src.replace(/\/cache\/[^\/]+/, "");
});
console.log($(".fotorama__img").attr("src"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false">

Answer 2

Вот как вы можете заменить его регулярным выражением, которое ищет любое число и строчные буквы для случайной части.

var img = document.querySelector(".fotorama__img");
var src = img.src;
img.src = src.replace(/cache\/[0-9a-z]+\//, '');
console.log(img.src);

<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>