使用Javascript将Html字符串解析为DOM节点的3种方式

--发布于 2023-07-17 11:40:01

如果我们需要将下面这个Html字符串转换为一个DOM元素节点

const htmlString = `
  <div id="root">
    <h1>Hello</h1>
    <p>World</p>
  </div>
`;

我们需要怎么做？其实有3种方法：

Range API
Template
DOMParser

下面，就分别说明一下这3种转换方法

Range API

Range API给我们提供了一个叫做createContextualFragment的方法。使用这个方法，我们就可以生成一个DocumentFragment，这个DocumentFragment里面包含了由Html字符串解析而成的DOM节点。

const range = document.createRange();
const fragment = range.createContextualFragment(htmlString);

Template

我们可以创建一个template标签元素，然后将这个Html字符串赋值给tempate的innnerHTML属性。这样，template的content属性，即template.content就会变为一个DocumentFragment，这个DocumentFragment里面就是由Html字符串解析而成的DOM节点。

const template = document.createElement('template');
template.innerHTML = htmlString;
const fragment = template.content;

DOMParser

使用DOMParser.parseFromString() 方法，我们可以将一个Html或Xml字符串解析为一个HTMLDocument (or XMLDocument)对象，这个对象里面就包含了我们所需的DOM节点。

const parser = new DOMParser();
// HTMLDocument(<html><body>...parsed nodes</body></html>)
const doc = parser.parseFromString(htmlString, "text/html"); // 第2个参数为mimeType，可以为 text/html, text/xml 等等这些
// 解析好的DOM节点
const nodes = doc.body;

以上就是3种将Html字符串转换为DOM节点的方式，使用哪一个都可以。但个人还是喜欢使用第3种，因为它的语义更加明确，而且可以支持转换text/html, text/xml, application/xml, application/xhtml+xml, image/svg+xml这些类型，功能更加强大。

参考

JavaScript Parse and Convert Raw HTML String to DOM Nodes

--更新于 2023-07-17 11:46:27

粤ICP备13044925号

标签

登录