在使用图像的任何位置替换图像-Javascript_Javascript_Html_Css

在使用图像的任何位置替换图像-Javascript

javascript html css

在使用图像的任何位置替换图像-Javascript,javascript,html,css,Javascript,Html,Css,我正在寻找一种方法来替换可以在页面上任何位置使用的图像因此，如果我们有这样一个示例html页面： <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <div style="background: url('example.com/img/1889.png')">

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

因此，如果我们有这样一个示例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>

这里可能有一些语法错误，但基本上只需尝试以下操作：

<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 + ')';
    }
}

以下代码执行您正在查找的操作：

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 + ')';
    }
}

为什么必须用JavaScript来实现这一点？如果图像只在-tags中使用，那么可以使用.getElementsByTagName'img'函数来获取所有img标记，然后将src属性与您要查找的任何图像进行比较，如果匹配，则替换它。如果是这样，请尝试使用$body.html$body.html。替换“旧图像”、“新图像”；您可以在插件中使用jQuery。你为什么不能？即使是用户脚本也可以请求依赖项。@DustinSilk如果从CDN使用jQuery，有99%的几率jQuery已经被缓存。但是，请注意。为什么必须使用JavaScript执行此操作？如果图像仅在-tags中使用，则可以使用.getElementsByTagName'img'函数获取所有img标记，然后将src属性与要查找的任何图像进行比较，如果匹配，请将其替换。如果是这样，请尝试此$body.html$body.html。替换“旧图像”，"新形象",；您可以在插件中使用jQuery。你为什么不能？即使是用户脚本也可以请求依赖项。@DustinSilk如果从CDN使用jQuery，有99%的几率jQuery已经被缓存。注意，但是。谢谢我会尝试一下如果是这样的话，那么试试这个$body.html$body.html。替换“旧图像”，“新图像”；谢谢，我会尝试一下，如果是这样的话，那么试试这个$body.html$body.html。替换“旧图像”，“新图像”；此答案与前一个答案的区别是：1检查使用该字符串的所有元素，而不仅仅是图像和div；2对于前景和背景图像，此字符串的相等性测试将失败，因此，使用.indexOf来匹配字符串。此答案与上一个答案之间的区别是：1这将检查使用该字符串的所有元素，而不仅仅是图像和div；2对于前景和背景图像，此字符串的相等性测试将失败，因此使用.indexOf来匹配字符串。