在使用图像的地方替换图像- Javascript

Replace an image wherever it is used - Javascript

本文关键字：图像 替换 Javascript 方替换      更新时间：2023-09-26

我正在寻找一种方法来替换可以在页面上任何地方使用的图像。

如果我们有一个像这样的html页面示例:

<html>
   <head>
   </head>
   <body>
       <img id="1" src="example.com/img/1889.png">
       <div style="background: url('example.com/img/1889.png')">
       <div>
       <a>
           <img id="2" src="example.com/img/1889.png">
       </a>
   </body>
</html>

每当- example.com/img/1889.png -出现时，必须用其他内容替换。

编辑

不幸的是我不能使用任何javascript库。这是一个浏览器插件。也不能使用浏览器特定的api

这里可能有一些语法错误，但基本上可以尝试这样做:

<script>
    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) {
        if (imgs[i].src == "oldImg")
            imgs[i].src = "newImg";
        }
    }
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].style.backgroundImage == "oldImg")
            divs[i].style.backgroundImage = "newImg";
        }
    }
</script>

下面的代码可以满足您的要求:

var images = document.querySelectorAll('[src]'), // all image and input elements
    styled = document.querySelectorAll('[style]'), // all elements with inline style
    iLen = images.length,
    sLen = styled.length,
    url = 'example.com/img/1889.png', // the string you're searching for
    str = 'some/string', // replace with whatever you choose
    i;
// check for 'example.com/img/1889.png' in image source
for (i = 0; i < iLen; i += 1) {
    if (images[i].src.indexOf(url) !== -1) {
        images[i].src = str;
    }
}
// check for 'example.com/img/1889.png' in either background or background-image
for (i = 0; i < sLen; i += 1) {
    if (styled[i].style.backgroundImage.indexOf(url) !== -1) {
        styled[i].style.backgroundImage = 'url(' + str + ')';
    }
}
演示

相关文章：