将HTML标签字符串转换为数组？ [关闭]

Question

我正在尝试将 HTML 字符串转换为 HTML 数组。例如，我可能有一个如下所示的任意 HTML 字符串：

"<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>"

（标签元素之间可能有也可能没有空格）

我正在尝试将其转换为如下所示的数组：

["<div>This</div>", "<h1>Is</h1>", "<p>A</p>", "<a href="#">Test</a>"]

这只是为了将标签显示为文本 - 我不会将它们用作 HTML 元素。

我在这里看过这个例子，它几乎可以工作，只是它从内部文本中剥离标签：https://stackoverflow.com/a/54340630/1282216

我正在寻找不涉及 DOM 解析的解决方案 - 如果可能的话。

欢迎提出任何建议！

Answer 1

始终使用 DOMParser 解析 HTML 字符串。

const string = `<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>`;

const doc = new DOMParser().parseFromString(string, "text/html");
const HTMLArray = [...doc.body.children].map(el => el.outerHTML);

console.log(HTMLArray)

• DOMParser
• ParentNode.children
• Array.prototype.map()
• Element.outerHTML

您应该never use RegExp 来解析 XML/HTML 字符串。但是如果你真的想要，并且知道你的字符串并且看起来像你提供的那样......

const str = `<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>`;
const m = str.match(/<[^>]+>[^<]*<\/[^>]+>/g); // Use at your own risk

console.log(m); 

请注意以上内容不适用于深度嵌套的 HTML，如果属性内部有 < 或 > 字符（完全有效且不常见）