使用 JavaScript，如何将 HTML 字符串转换为 HTML 标签和文本内容的数组？

Question

我有一个 HTML 字符串，例如：

<p>
    <strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.
</p>

我想将其转换为 JavaScript 数组，如下所示：

['<p>', '<strong>', '<em>', 'Lorem Ipsum ', '</em>', '</strong>', 'is simply dummy text of the printing ', '<em>', 'and', '</em>', 'typesetting industry.', '</p>']

即它采用 HTML 字符串并将其分解为标签数组和 HTML 内容。

我试图根据这个问题使用DomParser() ：

const str = `<p><strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.</p>`;

const doc = new DOMParser().parseFromString(str, 'text/html');
const arr = [...doc.body.childNodes]
  .map(child => child.outerHTML || child.textContent);

但是，这只是返回：

['<p><strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.</p>']

我还尝试搜索各种基于正则表达式的解决方案，但无法找到任何可以完全按照我的要求分解字符串的解决方案。

有什么建议么？

谢谢

Answer 1

我会做一个递归 function 来迭代给定节点并返回其子节点的文本表示数组：

 const str = `<p><strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.</p>`; const doc = new DOMParser().parseFromString(str, 'text/html'); const parseNode = node => { const output = []; for (const child of node.childNodes) { if (child.nodeType === Node.TEXT_NODE) { output.push(child.textContent); } else if (child.nodeType === Node.ELEMENT_NODE) { output.push(`<${child.tagName}>`); output.push(...parseNode(child)); output.push(`</${child.tagName}>`); } } return output; }; console.log(parseNode(doc.body));

如果您还需要保留属性，则可以采用元素的outerHTML并采用前导非括号：

 const str = `<p style="color:green"><strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.</p>`; const doc = new DOMParser().parseFromString(str, 'text/html'); const parseNode = node => { const output = []; for (const child of node.childNodes) { if (child.nodeType === Node.TEXT_NODE) { output.push(child.textContent); } else if (child.nodeType === Node.ELEMENT_NODE) { const attribs = child.outerHTML.match(/<\s*[^>\s]+([^>]*)/)[1]; output.push(`<${child.tagName}${attribs}>`); output.push(...parseNode(child)); output.push(`</${child.tagName}>`); } } return output; }; console.log(parseNode(doc.body));

如果您需要不展开自闭合标签，请检查元素的outerHTML是否包含</ ：

 const str = `<p style="color:green"><input readonly value="x"/><strong><em>Lorem Ipsum </em></strong>is simply dummy text of the printing <em>and</em> typesetting industry.</p>`; const doc = new DOMParser().parseFromString(str, 'text/html'); const parseNode = node => { const output = []; for (const child of node.childNodes) { if (child.nodeType === Node.TEXT_NODE) { output.push(child.textContent); } else if (child.nodeType === Node.ELEMENT_NODE) { const attribs = child.outerHTML.match(/<\s*[^>\s]+([^>]*)/)[1]; output.push(`<${child.tagName}${attribs}>`); if (child.outerHTML.includes('</')) { // Not self closing: output.push(...parseNode(child)); output.push(`</${child.tagName}>`); } } } return output; }; console.log(parseNode(doc.body));