npm 包 node-html-parser 使用教程

在前端开发中，我们经常需要从 HTML 页面中提取或修改数据。而 node-html-parser 就是一款能够解析和操作 HTML 文档的 npm 包。

安装

使用 npm 进行安装：

npm install node-html-parser

解析 HTML

首先，我们需要将 HTML 字符串转换为可操作的节点树。可以通过以下代码实现：

const { parse } = require("node-html-parser");

const root = parse("<div><span>Hello</span> world!</div>");
console.log(root.toString());

输出结果为：

<div>
  <span>Hello</span>
  world!
</div>

这样就成功地将 HTML 字符串解析成了一个节点树，并且可以通过 toString() 方法打印为字符串。

查找元素

接下来，我们可以使用 CSS 选择器查找特定的元素。例如，要查找所有的 <a> 标签，可以使用以下代码：

const links = root.querySelectorAll("a");
console.log(links);

输出结果为该节点树中所有的 <a> 标签。

同样的，我们也可以使用 querySelector 方法查找单个元素。

const firstLink = root.querySelector("a");
console.log(firstLink);

输出结果为该节点树中第一个 <a> 标签。

修改元素

对于查找到的元素，我们可以对其进行修改。例如，将某个元素的文本内容替换为另一个文本：

const span = root.querySelector("span");
span.set_content("Bonjour");
console.log(root.toString());

输出结果为：

<div>
  <span>Bonjour</span>
  world!
</div>

添加元素

我们还可以添加新的元素到已有的节点树中。例如，将 <ul> 标签添加到 <div> 标签中：

const ul = parse("<ul><li>Item 1</li><li>Item 2</li></ul>");
root.appendChild(ul);
console.log(root.toString());

输出结果为：

<div>
  <span>Bonjour</span>
  world!
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

总结

node-html-parser 是一款非常实用的 npm 包，能够轻松地解析和操作 HTML 文档。通过本文介绍的方法，我们可以使用它查找元素、修改元素以及添加元素，从而更高效地提取或修改 HTML 页面中的数据。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54385