简介
parse5 是一款轻量级、快速的 HTML 解析器，它可以将 HTML 字符串解析成一个 DOM 树，同时支持修改和序列化操作。parse5 可以在浏览器中使用，也可以在 Node.js 中使用，是开发 Web 应用程序的重要工具之一。
安装
使用 npm 安装 parse5:
npm install parse5 --save
解析 HTML
以下是使用 parse5 解析 HTML 的示例代码：
const parse5 = require('parse5');
const html = '<html><head><title>My Title</title></head><body><p>Hello World!</p></body></html>';
const document = parse5.parse(html);
console.log(document);输出结果为：
-- -------------------- ---- -------
-
--------- ------------
----------- -
-
--------- -------
-------- -------
------ ---
----------- -
-
--------- -------
-------- -------
------ ---
----------- -
-
--------- --------
-------- --------
------ ---
----------- -
-
--------- --------
------ --- ------
-
-
-
-
--
-
--------- -------
-------- -------
------ ---
----------- -
-
--------- ----
-------- ----
------ ---
----------- -
-
--------- --------
------ ------ -------
-
-
-
-
-
-
-
-
-获取节点信息
可以通过解析结果访问 DOM 树中的节点信息，例如：
const titleNode = document.childNodes[0].childNodes[0].childNodes[0].childNodes[0]; console.log(titleNode.tagName); // 'title' console.log(titleNode.childNodes[0].value); // 'My Title'
修改节点信息
使用 parse5 可以很方便地修改 HTML 中的节点信息。下面的示例代码将修改标题文本：
const titleNode = document.childNodes[0].childNodes[0].childNodes[0].childNodes[0]; titleNode.childNodes[0].value = 'New Title'; const modifiedHtml = parse5.serialize(document); console.log(modifiedHtml);
输出结果为：
<html><head><title>New Title</title></head><body><p>Hello World!</p></body></html>
序列化 DOM 树
parse5 还支持将 DOM 树序列化成 HTML 字符串。以下是示例代码：
const modifiedHtml = parse5.serialize(document); console.log(modifiedHtml);
输出结果为：
<html><head><title>New Title</title></head><body><p>Hello World!</p></body></html>
结论
使用 parse5 可以轻松地解析、修改和序列化 HTML 内容，是一个非常有用的工具。建议开发者多了解和掌握 parse5 的使用方法，从而提高 Web 开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48909