为数组中的所有 img src 添加前缀答案

【问题标题】：Add prefix to all img src in a array为数组中的所有 img src 添加前缀
【发布时间】：2021-05-28 17:21:29
【问题描述】：

所以我正在解决这个问题，为 img src 属性附加前缀

例如

<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>

to

<img alt='' src='**myprefix**/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>

问题是这样的数组格式的字符串

[
    "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"
    "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"
    "<img alt='' src='images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"
    "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"
    "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"

]

现在我有一个小的工作示例来获取图像 src，但不确定如何在数组中添加 src 属性前缀

var string ="<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");
elem.innerHTML = string;

var images = elem.getElementsByTagName("img");
for(var i=0; i < images.length; i++){
   console.log(images[i].src);   
}

我是 JavaScript 的绝对初学者，因此任何指导都会有所帮助。提前致谢

【问题讨论】：

前缀 src atttr 是什么意思？！
对上述数组中的错字表示歉意，我需要将“api.com”附加到已经存在的 src="/images/UID" 中，这样我就有 src="api.com/images/UID"

标签： javascript html arrays

【解决方案1】：

创建一个包含前缀的变量并在src属性中使用它：

const prefix = 'http://api.com';
const images = [
    `<img alt="" src="${prefix}/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="${prefix}/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="${prefix}/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="${prefix}/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="${prefix}/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`
]
images.forEach(image => console.log(image));

如果您无法修改数组的创建，您可以替换字符串中的源

const prefix = 'http://api.com';
const images = [
    `<img alt="" src="/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`,
    `<img alt="" src="/images/UID" /><br/>Some plain text<br/><a href="http://www.google.com">http://www.google.com</a>`
].map(image => image.replace(/src="/g, 'src="' + prefix));
images.forEach(image => console.log(image));

一个带有多个img标签的例子：

const prefix = 'http://api.com';
[
    "<hr style=\"height: 10px; background-color: #99ccff;\" />\r\n<h3>Plain text:</h3>\r\n<p>Plain text \"Plain text\", Plain text&nbsp;</p>\r\n<p><img src=\"sampleimage\" alt=\"image text\" width=\"747\" height=\"43\" /></p>\r\n<hr />\r\n<h3>plaintext:</h3>\r\n<p>blah blah blah</p>\r\n<hr />\r\n<h3>res:</h3>\r\n<p>blah blah blah:</p>\r\n<ol>\r\n<li>blah<strong>plain text</strong> plain text <strong>blah blah</strong>blah blah<br /><strong><span style=\"color: #ff0000;\">Note</span></strong>:blah blah<strong>File</strong> &gt; <strong>settings</strong> &gt; <strong>plain text</strong> &gt;&nbsp;<strong>blah</strong> &gt; <strong>plain text</strong> &gt; <strong>plain </strong><br /><br /><img src=\"/sampleimage\" alt=\"image text\" width=\"716\" height=\"126\" /><br /><br /></li>\r\n<li>blah<br /><br /><img src=\"/sampleimage\" alt=\"image text\" width=\"128\" height=\"95\" /><br /><br /></li>\r\n<li>blah blah<br /><br /><img src=\"/sample image\" alt=\"image text\" width=\"620\" height=\"33\" /></li>\r\n</ol>\r\n<hr style=\"height: 10px; background-color: #99ccff;\" />"
].map(image => image.replace(/src="/g, 'src="' + prefix)).forEach(image => console.log(image));

【讨论】：

那行得通，我正在寻找什么，谢谢+1
再问一个问题，如果有多个像下面这样的img标签，如果同一行中有多个img标签，它将在第一个img标签处停止，我该如何解决？
常量图像 = [ <img alt="" src="/images/UID" /><br/>Some plain text<br/><img alt="" src="/images/UID" /><a href="http://www.google.com">http://www.google.com</a>, <img alt="" src="/images/UID" /><br/>Some plain text<br/><img alt="" src="/images/UID" /><a href="http://www.google.com">http://www.google.com</a>, ]
@BHL 我认为第一个代码的行为很明显：如果添加 prefix，则 URL 是前缀，如果不添加 prefix，则 URL 没有前缀。第二个代码为所有 src 属性添加前缀。
得到了它，我使用第二个代码为问题中提供的示例数组中的所有 src 属性加上前缀，并在第一个 src 处停止。请参阅编辑。不确定我是否在这里做错了，上面的数组包含一些转义字符和带有 HTML 标记的内联样式

【解决方案2】：

这将首先创建 HTML 元素，然后遍历并修改它们。我不确定 OP 是否需要循环浏览现有元素或数组

const imgs = [
  "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
  "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
  "<img alt='' src='images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
  "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
  "<img alt='' src='/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"
]

// create the elements
imgs.forEach(tag => {
  document.getElementById('tags').innerHTML += "<div>" + tag + "</div>";
});

// modify the HTML elements
let images = document.getElementById('tags').getElementsByTagName("img");
for (img of images) {
  img.src = "**myprefix**" + img.src
}

&lt;div id='tags'&gt;&lt;/div&gt;

【讨论】：