在页面加载时替换所有 img src - Javascript答案

【问题标题】：Replace all img src on page load - Javascript在页面加载时替换所有 img src - Javascript
【发布时间】：2018-07-27 15:29:05
【问题描述】：

我正在尝试替换我页面上的所有 img src，当它们中有特定的 url 时。到目前为止，我能够记录所有替换的 img src，但我的最后一步是在我的页面上更改它们。

function replaceMyImgs() {

// put live url here
var liveUrl = "via.placeholder.com";

// find the local url
var localUrl = "testdomain.com";

// replace the local url for the live url
var newUrl = localUrl.replace(/testdomain.com/g, liveUrl);

// console.log(newUrl);

// get all images and push them in an empty array
var imgs = document.getElementsByTagName("img");
var imgSrcs = [];

for (var i = 0; i < imgs.length; i++) {
  imgSrcs.push(imgs[i].src);
}

imgSrcs.forEach(function(src) {
   // log all the found img srcs
   var newSrc = src.replace(/testdomain.com/g, liveUrl);

   imgs.src = newSrc;

   console.log(imgs.src);

 });

}

window.onload = replaceMyImgs;

看我的笔：https://codepen.io/kleefaan/pen/yqzBVv

【问题讨论】：

你在设置src，有什么问题？
你应该遍历 imgs 并为它们中的每一个使用 setAttribute("src",newSrc)。
@JagdeeshKumar 你在哪里看到 jQuery？
Change all <img> tag src attributes in html document?的可能重复
@Brad ，记录新的 src 确实有效。是否需要其他操作才能真正更改浏览器中的图像？

标签： javascript replace

【解决方案1】：

您可以像这样在 for 循环中进行替换，而不是将所有元素推入数组中：

// get all images
var imgs = document.getElementsByTagName("img");

for (var i = 0; i < imgs.length; i++) {
  var newSrc = imgs[i].src.replace(/testdomain.com/g, liveUrl);
  imgs[i].src = newSrc;
  console.log(imgs[i].src);
}

【讨论】：

这正是我想要的！谢谢。