使用 jQuery 从 HTML 内容中替换动态关键字答案

【问题标题】：Replace dynamic keyword from HTML content using jQuery使用 jQuery 从 HTML 内容中替换动态关键字
【发布时间】：2018-11-30 23:30:26
【问题描述】：

<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>

我想从 IMG 属性中替换 /cache/713229083fb198/ 并再次加载该图像。

来自

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 替换它。

【问题讨论】：

它会永远是你要替换的那个值吗？
替换字符串的一部分是字符串操作，而不是 jQuery 操作。
@treyBake yes 713229083... 将是动态的

标签： javascript jquery html image

【解决方案1】：

以下是您如何将其替换为正则表达式，该正则表达式为随机外观部分查找任意数字和小写字符。

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>

【讨论】：

【解决方案2】：

使用.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">

【讨论】：