jquery 替换元素中所有属性的特定值

9fkzdhlc  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(94)

我有这个HTML代码与多个属性,具有相同的链接到一个图像,我需要从链接中替换两个部分,从'imageONE'到'imageTWO'和'v123'到'*v456'.我怎样才能一次完成这项工作,而不必逐个选择每个属性?

从此处更改:

<img src="//website.com/imageONE_100x.jpg?v=123" data-src="//website.com/imageONE_200x.jpg?v=123" data-sizes="auto" data-srcset="//website.com/imageONE_300x.jpg?v=123" height="100" width="100" srcset="//website.com/imageONE_400x.jpg?v=123">

对此:

<img src="//website.com/imageTWO_100x.jpg?v=456" data-src="//website.com/imageTWO_200x.jpg?v=456" data-sizes="auto" data-srcset="//website.com/imageTWO_300x.jpg?v=456" height="100" width="100" srcset="//website.com/imageTWO_400x.jpg?v=456">

我试过'document.body.innerHTML. replace',即使这样做,它摆脱了所有的绑定和混乱的网站功能。
非常感谢!

pobjuy32

pobjuy321#

您可以通过getAttributeNames()获取所有属性名称,对它们进行重命名并执行替换

document.querySelectorAll("img").forEach((img) => {
  for (let attr of img.getAttributeNames()) {
    img.setAttribute(
      attr,
      img
        .getAttribute(attr)
        .replaceAll("imageONE", "imageTWO")
        .replaceAll("v=123", "v=456"),
    );
  }
});

console.log(document.querySelector("div").innerHTML);
<div>
<img src="//website.com/imageONE_100x.jpg?v=123" data-src="//website.com/imageONE_200x.jpg?v=123" data-sizes="auto" data-srcset="//website.com/imageONE_300x.jpg?v=123" height="100" width="100" srcset="//website.com/imageONE_400x.jpg?v=123">
</div>

相关问题