将Javascript HTML字符串转换为标签数组和内部内容

Question

我正在尝试对HTML标记及其内部内容进行匹配，并将每个匹配项放入一个数组(标记及其内部属性(。

我能够将标签本身进行匹配，并将其放入一个数组中，但我不确定如何获取标签的内部内容。

// Example String
let str = "<p><b>Label:</b>Value<p></p><p><b>New Line Label:</b>Value 2</p></p>";
console.log(str.match(/<.*?>/gi)) // Output ["<p>", "<b>", "</b>", "<p>", "</p>", "<p>", "<b>", "</b>", "</p>", "</p>"]

// Expected Output
["<p>", "<b>", "Label:", "</b>", "Value", "<p>", "</p>", "<p>", "<b>", "New Line Label:", "</b>", "Value 2", "</p>", "</p>"]

这可以在一个正则表达式匹配中处理吗？还是我需要匹配，然后回头看前一个结束标记以获取内部内容？

Answer 1

您可以使用DOMParser API，然后通过每个节点的子级不断迭代

let doc = new DOMParser().parseFromString('<p><b>Label:</b>Value<p></p><p><b>New Line Label:</b>Value 2</p></p>', 'text/html')
console.log(doc.children) // DOM nodes 

有了这个，你就可以从字符串中构建一个完整的DOM，然后在它上应用你想要的任何函数