从字符串块中获取元素数组

Get Array of elements from a chunk of string

提问人：inux 提问时间：11/26/2021 更新时间：11/27/2021 访问量：98

问：

我有一个包含 HTML 元素的模板文字，我想通过一个函数运行它并获取所有元素及其字符串的数组。

const tmp = `
<div>
 <h1>Heading <span>inline</span></h1>
 <button>Click Me</button>
</div>
`

这应该给我：

["<h1>Heading <span>inline</span></h1>", "<span>inline</span>", "<button>Click Me</button>"]

我该怎么做？

javascript dom html 解析

评论

0赞 Ivan Rubinson 11/26/2021
所以你想要 div 的 innerHTML？
1赞 Sebastian Simon 11/26/2021
1. 解析 HTML， 2.选择所有元素， 3.获取其外部 HTML。请参阅 DOMParser、querySelectorAll、map、outerHTML。你试过了什么？
0赞 Ivan Rubinson 11/26/2021
如果你没有可用的 DOMParser（如果你不在浏览器环境中），你可以试试 jsdom
0赞 inux 11/26/2021
我尝试了 DOMParser，但我正在努力找到一个将整个元素返回为字符串“<div>MyDiv</div>” 的 API
0赞 Sebastian Simon 11/26/2021
@inux ？还是 XMLSerializer？.outerHTML

答：

1赞 Jack Fleeting 11/27/2021 #1

试试这种方式：

const tmp = `
<div>
 <h1>Heading <span>inline</span></h1>
 <button>Click Me</button>
</div>
`
let elems = [],
 domElement = new DOMParser().parseFromString(tmp, "text/xml"),
 results = domElement.evaluate('//div//*', domElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for(let i = 0; i < results.snapshotLength; i++) {
  let node = results.snapshotItem(i); 
  elems.push(node);     
}
console.log(elems)

输出应为预期输出。

评论

0赞 Sebastian Simon 11/27/2021
text/html而不是可能更好。不带 XPath 的替代项：.此外，是一个用词不当：是 ，而不是 .text/xmlconsole.log(Array.from(domElement.querySelector("div").querySelectorAll("*")).map(({ outerHTML }) => outerHTML));domElementdomElementHTMLDocumentElement
0赞 inux 11/27/2021
这在浏览器中可以完美运行，我需要一个节点版本。谢谢
0赞 Jack Fleeting 11/29/2021
@inux - 根据 SO poilicy，您可能应该在单独的问题中发布节点版本请求。

上一个：在 Javascript 中动态修复/修复无效的 HTML

下一个：如何解析某个 &lt;div&gt; 标签内的所有 &lt;p&gt; 标签？