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

问题描述 投票：0回答：3

我有以下字符串：

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" } 
    ]
javascript html node.js tags extract
3个回答
2
投票

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

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

DOMParser
。

如果您在 Node.js 中执行此操作，有几个库可以执行此操作，例如 

jsdom
。它提供的 API 与网络浏览器中的 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
来获取原始大写。）

0
投票

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

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>

0
投票

https://bun.sh/docs/bundler/macros#make-fetch-requests-at-bundle-time

谢谢大家，我找到了一个内置的功能，它正是我想要的！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.