Question

我有一些标记，其中包含具有以下result属性的图片：

src

我想替换其路径中包含https://url.com/image/img.jpg的任何图像（或href）。结果将是：

/image/

我尝试过使用：

https://newurl.com/img.jpg

但不确定如何将其设置为仅匹配/src="(?:[^'\/]*\/)*([^']+)"/g路径，当我将/image/更改为src时，它似乎不允许我替换它们。< / p>

为了澄清，我正在解析碰巧包含html字符串的纯文本。此外，我需要能够维护文件名，但替换主机地址。

更新：这是我目前所拥有的jsfiddle。虽然它适用于href，但它没有考虑路径中的src，也会删除href。

Answer 1

Obligatory don't use regex to parse HTML...

由于您已经在使用JavaScript，因此可以使用本机DOM API迭代所有img元素并更新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);

Answer 2

这应该有效。

<强> REGEXP：

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

<强> INPUT：

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

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

2 个答案: