前端字符串解析HTML

parse5 工具集

一、parse5 - HTML解析器和序列化器

注意：默认情况下，所有函数都使用默认树适配器生成的树格式。可以通过提供自定义树适配器实现来更改树格式。

方法：

1. parse - 解析 HTML 字符串，返回一个 Document

const parse5 = require('parse5');
const document = parse5.parse('<!DOCTYPE html><html><head></head><body>Hi there!</body></html>');
console.log(document);

结果如下：

注意： parse 方法返回的是一个 Document，即使参数是 HTML 节点字符串返回的树结构也是从 document 开始，HTML 节点作为 body 的子节点，例如：

const parse5 = require('parse5');
const document = parse5.parse('<div><p>Hi there!</p></div>');
console.log(document)

结果如下：

2. parseFragment - 解析 HTML 片段，返回 DocumentFragment

const parse5 = require('parse5');
const documentFragment = parse5.parseFragment('<table></table>');
console.log(documentFragment);

结果如下：

在解析的 <table> 元素的上下文中解析 HTML 片段。

const trFragment = parse5.parseFragment(documentFragment.childNodes[0], '<tr><td>Shake it, baby</td></tr>');
console.log(trFragment)

结果如下：

3. serialize - 将 AST 节点序列化为 HTML 字符串，返回字符串

const document = parse5.parse('<!DOCTYPE html><html><head></head><body>Hi there!</body></html>')
console.log(document)

const html = parse5.serialize(document)
console.log(html)

const body = parse5.serialize(document.childNodes[1].childNodes[1])
console.log(body)

const documentFragment = parse5.parseFragment('<div>Hello parse5!</div>')
console.log(documentFragment)

const div = parse5.serialize(documentFragment)
console.log(div)

结果依次：