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

Question

我有以下字符串：

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" } 
    ]

Answer 1

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

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

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

这是一个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}`);
}

使用您的字符串，那将是 output：

FIRSTTAG - text inside first tag
SECONDTAG - 50

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

Answer 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>

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

问题描述

2 个解决方案

解决方案1
2

解决方案2
0 已采纳 2021-01-14 18:51:55

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

问题描述

2 个解决方案

解决方案1 2

解决方案2 0 已采纳 2021-01-14 18:51:55

解决方案1
2

解决方案2
0 已采纳 2021-01-14 18:51:55