如果路径有值，则JavaScript替换src属性

Question

我有一些包含以下src属性的图像标记：

https://url.com/image/img.jpg

我希望替换任何路径中包含“/image/”的图像（或href）, 替换后的结果如下:

https://newurl.com/img.jpg

我尝试使用了以下方法:

/src="(?:[^'\/]*\/)*([^']+)"/g

但不确定如何使其仅匹配/image/路径，同时当我将src更改为href时，似乎无法替换两者。

澄清一下，我正在解析包含html字符串的纯文本。此外，我需要能够保留文件名，但替换主机地址。

更新：这是我目前拥有的jsfiddle。尽管它适用于src，但它没有考虑到路径中的/image/，同时删除了href。

- dzm

---

为什么不创建一个仅匹配 /image/ 的正则表达式呢？ - Abhinav Galodha

除非你认为有必要复杂化，否则不要过于繁琐 - src.replace('/image/','/')。 - Adam Jenkins

顺便问一下，你能否发布完整的语句而不仅仅是正则表达式？编程有时可能很傻呵呵的。我每天都这样做，哈哈:D - Gogol

我添加了一个 jsfiddle。 - dzm

Answer 1

强制不要使用正则表达式解析HTML...

---

既然您已经在使用JavaScript，可以使用本地DOM API来遍历所有元素并更新src属性：

Array.prototype.map.call(document.querySelectorAll('img'), function(img) {
  img.src = img.src.replace(/\/image\//, '/');
});

---

但是因为您明确指出您有一个包含HTML的字符串，您可以创建一个临时元素，将该字符串作为HTML插入，替换src属性，然后检索更新后的innerHTML属性值。

例如：

var content = `string of content containing random text, some elements, <p>and paragraphs</p> and more text.. <img src="https://url.com/image/img.jpg" /><img src="https://url.com/image/img.jpg" />`;

// Create the temporary DOM element
var temporaryElement = document.createElement('div');
temporaryElement.innerHTML = content;

// Replace the `src` attributes
Array.from(temporaryElement.querySelectorAll('img')).forEach((img) => {
  img.src = img.src.replace(/\/image\//, '/');
});

// Retrieve the updated `innerHTML` property
var updatedContent = temporaryElement.innerHTML;
console.log(updatedContent);

- Josh Crozier

---

抱歉，我应该澄清一下，我不是在解析DOM，这只是纯文本内容，恰好包含HTML元素。 - dzm

如果URL以image结尾，例如https://newurl.com/somepath/image.jpg，则此方法会失败-请检查是否存在尾部斜杠。不过，提问者并没有明确说明这不是期望的行为...算了。 - Adam Jenkins

@dzm - 像这样吗？我刚刚更新了您发布的fiddle.. https://jsfiddle.net/3mgo3u8L/ - Josh Crozier

@JoshCrozier 谢谢，看起来这个方法可能可行，不过我更倾向于使用正则表达式。我是在服务器端进行操作，虽然我可以将其放入 DOM 中，但使用正则表达式可能会更加简洁和快速。 - dzm

Answer 2

这应该可以运行。

正则表达式：

(?:^(?:https:\/{2})(?:\w*\.*|\d*\.*)(?:\w*|\d*)*(?:\/image\/))(.+)$

输入：

https://url.com/image/img.jpg
https://url.com/image/asdasdasd.jpg

替换为：https://newurl.com/

https://newurl.com/$1

结果：

https://newurl.com/img.jpg
https://newurl.com/asdasdasd.jpg

JAVASCRIPT 代码：

const regex = /(?:^(?:https:\/{2})(?:\w*\.*|\d*\.*)(?:\w*|\d*)*(?:\/image\/))(.+)$/gm;
const str = `https://url.com/image/img.jpg
https://url.com/image/asdasdasd.jpg
`;
const subst = `https://newurl.com/\$1`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log('Substitution result: ', result);

参见：https://regex101.com/r/I4hHV7/2

- Eduardo Lynch Araya

---

这很接近，但如果str中有任何其他文本，它似乎无法替换。 - dzm