如何使用 Javascript 在字符串中找到 HTML 之类的标签？答案

【问题标题】：How can I find HTML like tags in a string using Javascript?如何使用 Javascript 在字符串中找到 HTML 之类的标签？
【发布时间】：2021-01-14 18:18:11
【问题描述】：

我有以下字符串：

var originalStr = "Test example <firstTag>text inside first tag</firstTag>, <secondTag>50</secondTag> end."

识别所有标签、对应标签名称及其内容的最佳方法是什么？这就是我正在寻找的结果。


var tagsFound = 
    [ { "tagName": "firstTag",  "value": "text inside first tag" } 
    , { "tagName": "secondTag", "value": "50" } 
    ]

【问题讨论】：

网站上有dozens of questions讨论这个话题，我建议你去看看。但我还在下面提供了一些信息（其中许多问题相当具体，也相当古老）。

标签： javascript html node.js tags extract

【解决方案1】：

HTML 的解析非常复杂，因此最好的方法是使用已经存在的解析器。

如果您在浏览器中执行此操作，则可以使用浏览器内置的：DOMParser。

如果您在 Node.js 中执行此操作，有几个库可以执行此操作，例如 jsdom。它提供的 API 几乎与 Web 浏览器中的 API 相同。

这是一个jsdom 示例：

const dom = new JSDOM("<!doctype html>" + originalStr);
const doc = dom.window.document;
for (const childElement of doc.body.children) {
    console.log(`${childElement.tagName} - ${childElement.textContent}`);
}

使用您的字符串，将输出：

FIRSTTAG - text inside first tag
SECONDTAG - 50

您将使用提供的 DOM 方法编写代码来创建您正在寻找的输出。（请注意上面的标签名称规范化；如果这对您正在做的事情很重要，您可能必须使用 nodeLocation 来获取原始大写。）

【讨论】：

【解决方案2】：

根据您处理的字符串的复杂性 - 简单的正则表达式解决方案可能有效（它非常适合您的字符串：

var str = 'Test example <firstTag>text inside first tag</firstTag>, <secondTag>50</secondTag> end.';

var tagsFound = [];
str.replace(/<([a-zA-Z][a-zA-Z0-9_-]*)\b[^>]*>(.*?)<\/\1>/g, function(m,m1,m2){
    // write data to result objcect
    tagsFound.push({
        "tagName": m1,
        "value": m2
    })
    // replace with original = do nothing with string
    return m;
});

// Displaying the results
for(var i=0;i<tagsFound.length; i++){
    console.log(tagsFound[i]);
}

将自闭合标签或包含其他标签的标签纳入帐户时会出现问题。喜欢<selfClosedTag/> 或<tag><tag>something</tag>else</tag>

【讨论】：

您能解释一下您是如何使用正则表达式获得 m1 和 m2 值的吗？