如何使用 document.createElement + innerHTML 安全高效地解析 HTML 字符串?

如何使用 document.createElement + innerHTML 安全高效地解析 HTML 字符串?

使用 document.createelement + innerhtml 解析 html

JavaScript 中,使用正则表达式解析 HTML 文本可能存在误配问题。为了安全稳妥,建议使用 HTML 解析器。

一个可行的解决方案是使用 document.createElement + innerHTML 来解析 HTML 字符串。这是一种简单且高效的方法,操作如下:

const html = `<section><a href="/">首页</a>     <a href="/about">关于我们</a>     <a href="/contact">联系我们</a> </section>`;  const element = document.createElement('div'); element.innerHTML = html;  const hrefs = [...element.querySelectorAll('a')].map(a =&gt; a.href);
登录后复制

在这个示例中,element 变量现在包含解析后的 HTML 文档,我们可以通过 querySelectorAll() 方法获取其中的所有 元素,然后用 map() 方法获取每个元素的 href 属性。

结果:

立即学习前端免费学习笔记(深入)”;

hrefs = ['/', '/about', '/contact'];
登录后复制

这种方法不仅可以获取 href 属性,还可以访问其他属性和 dom 节点,更灵活且强大。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容