【问题标题】：Find all <img> tags and replace them by their src (NODEJS)查找所有 <img> 标签并用它们的 src (NODEJS) 替换它们
【发布时间】：2021-10-16 13:29:09
【问题描述】：

（编辑）这应该在 nodeJS 后端应用程序中实现，因此尽量避免 DOMParser()

我有一个混合文本和标签的字符串，如下所示：

This is a comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129324867-83b2e2bf-52c7-4dc6-a8b6-760194e2a875.png">

Some more comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129335514-e7e921e9-eb1e-4848-b197-a2438bcc7bd3.png">

This is the end of the comment

我想创建一个函数，用 src 标签内的内容替换标签，如下所示：

This is a comment

https://user-images.githubusercontent.com/10532381/129324867-83b2e2bf-52c7-4dc6-a8b6-760194e2a875.png

Some more comment

https://user-images.githubusercontent.com/10532381/129335514-e7e921e9-eb1e-4848-b197-a2438bcc7bd3.png

This is the end of the comment

我玩过 Regex，但找不到让它工作的方法。欢迎任何建议！

【问题讨论】：

你想用 src URL 做什么？
我将其发送到 Slack 对话，以便 Slack 显示缩略图

标签： javascript html node.js regex

【解决方案1】：

这个 sn-p 完成了这项工作：

const contents = `This is a comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129324867-83b2e2bf-52c7-4dc6-a8b6-760194e2a875.png">

Some more comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129335514-e7e921e9-eb1e-4848-b197-a2438bcc7bd3.png">

This is the end of the comment`;

const re = /(<img.+src=")(.*)(">)/ig;
const parsedContents = contents.replace(re, "$2");
console.log(parsedContents);

如果这有帮助，请告诉我。

【讨论】：

【解决方案2】：

这应该可以，但我还没有测试过：

这使用DOMParser Web API。

const doc = domparser.parseFromString(string, "text/html");

Array.from(doc.querySelectorAll("img")).forEach((img) => {
  img.parentNode.replaceChild(document.createTextNode(img.src), img);
});

console.log(doc.innerHTML);

【讨论】：

【解决方案3】：

好吧，我找到了这项工作。你可以找到更多关于 DOMParser here

var htmlString = `This is a comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129324867-83b2e2bf-52c7-4dc6-a8b6-760194e2a875.png">

Some more comment

<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129335514-e7e921e9-eb1e-4848-b197-a2438bcc7bd3.png">

This is the end of the comment`

var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");

var allImg = doc.body.querySelectorAll('img')
allImg.forEach(function(item){
    var src = item.getAttribute('src') || ''
    item.replaceWith(src)
})

console.log(htmlString, '\n-------\n' ,doc.body.innerText)

【讨论】：

谢谢，这似乎在浏览器中工作，我可能需要使用像 jsondom 这样的外部库才能使其在 NODEJS 中工作
@SydneyC。哎呀，我不知道它应该在 NodeJs 上工作。我会再挖一点
我的原始消息中并不清楚。有人找到了一个很好的工作，我接受它作为一个很好的答案谢谢你的时间！

【解决方案4】：

第 1 步：查找页面中的所有元素。

var x = document.getElementsByTagName("img");

第 2 步：var x 是文档中所有图像的数组。使用循环，使用获取所有值

x[i].src

【讨论】：

【解决方案5】：

let input = `This is a comment
<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129324867-83b2e2bf-52c7-4dc6-a8b6-760194e2a875.png"/>
Some more comment
<img width="232" alt="CleanShot 2021-08-13 at 10 03 02@2x" src="https://user-images.githubusercontent.com/10532381/129335514-e7e921e9-eb1e-4848-b197-a2438bcc7bd3.png"/>
This is the end of the comment`;

let imgs = input.match(/<.+>/g);
let srcs = imgs.map(img => img.match(/src=".+"/g)[0])
            .map(src => src.substring(0, src.length-1).replace('src="', ''));

for(let i=0; i < imgs.length; i++){
    input = input.replace(imgs[i], srcs[i]);
}

console.log(input);

【讨论】：