如何使用javascript将相对img src标签更新为绝对路径答案

【问题标题】：How to update relative img src tag to an absolute path using javascript如何使用javascript将相对img src标签更新为绝对路径
【发布时间】：2017-03-02 23:57:59
【问题描述】：

我有一个 Web 应用程序从外部资源中提取 RSS 提要。从提要中提取的一些图像是相对路径，例如/assets/images/image.jpg。具有相对路径的图像最终是 404，因为它们不会回调外部资源，因为它是像 externalsource.com/assets/images/image.jpg 这样的绝对路径。我想写一个 javascript 函数来收集页面上所有的 img src 标签，并确保它们都是绝对路径。我收集所有 img src 没有问题，但不能用绝对 url 替换它们。当打印出 img srcs 时，来自提要中的资源的 url 将应用于 url。赞resource/assets/images/image.jpg

这是我目前所拥有的：

var images = document.getElementsByTagName('img');
var srcList = [];
for(var i = 0; i < images.length; i++) {
var pattern = new RegExp('^https?:\/\/fiddle\.jshell\.net(\/)');
if (pattern.test(images[i].src)){
    var sources = images[i].src;
        images[i].src = sources.replace("^https?:\/\/fiddle\.jshell\.net(\/)", "http://duo.com");
   console.log(images[i].src);  
}else{
    console.log("no match");    
}
}

我正在收集所有 src，将它们与正则表达式进行比较以查看它是否与资源 url 匹配，并将其替换为来自外部资源的 url。不幸的是，替换 url 部分不起作用。它需要是纯 javascript 而不是 jquery。

非常感谢任何帮助！

【问题讨论】：

标签： javascript html image

【解决方案1】：

您似乎将字符串传递给String#replace 的第一个参数：

images[i].src = sources.replace("^https?:\/\/fiddle\.jshell\.net(\/)", "http://duo.com")

您可能打算传递一个正则表达式（注意使用 / 而不是 "；这表示 JS 中的正则表达式文字）：

images[i].src = sources.replace(/^https?:\/\/fiddle\.jshell\.net(\/)/, "http://duo.com")

但是，我建议您将大部分循环和测试逻辑简化为在 forEach 循环内对 replace 的一次调用，如下所示：

[].forEach.call(document.getElementsByTagName('img'), function (image) {
  image.src = image.src.replace(/^https?:\/\/fiddle\.jshell\.net\//, 'http://duo.com/')
  console.log(image.src)
})

&lt;img src="http://fiddle.jshell.net/favicon.ico"&gt;

【讨论】：