作为前端开发者，我们经常需要处理 HTML 字符串。而处理 HTML，需要解析它，分离出标签、文本内容等，这时候就需要用到一个 HTML 解析工具。本文将介绍一款 NPM 包——HTML-Parser，它简单易用，能够快速解析 HTML 字符串。
什么是 HTML-Parser
HTML-Parser 是一个基于 JS 的 HTML 解析器。它能够将一个 HTML 字符串转换为一个树状结构，便于获取并操作其中的节点。
HTML-Parser 的特点：
- 简单易用，只需几行 JavaScript
- 解析效率高
- 可以处理任意类型的 HTML 字符串，包括大项目
如何使用 HTML-Parser
- 安装 HTML-Parser
在终端中使用以下命令：
npm install html-parser
- 导入 HTML-Parser
在 JavaScript 源文件中引入即可。
import HTMLParser from 'html-parser';
- 解析 HTML 字符串
HTML-Parser 提供了两种方式解析 HTML 字符串。
3.1 解析为树状结构
-- -------------------- ---- -------
----- ------ - --- -------------
----- ---- - --------------
---- ------------------
--------------
--------------
------
---
------------------输出结果：
{
tag: 'div',
attr: { class: 'container' },
children: [
{ tag: 'h1', attr: {}, children: [{ text: 'Title' }] },
{ tag: 'p', attr: {}, children: [{ text: 'Content' }] }
]
}在上面的例子中，我们使用 parse 方法将一个 HTML 字符串解析为一个树状的结构。其中，tag 表示节点的标签名，attr 表示节点的属性，children 表示子节点。另外，如果节点是一个文本节点，则它还会有一个 text 属性。
3.2 使用回调函数解析
如果你只需要针对 HTML 字符串中的某些特定标签做一些处理，那么可以使用以下方法。
const parser = new HTMLParser();
parser.parse(`
<div class="container">
<h1>Title</h1>
<p>Content</p>
</div>`, (tag, attr, text) => {
console.log(tag, attr, text);
});输出结果：
div { class: 'container' } undefined
h1 {} Title
p {} Content在上面的例子中，我们使用一个回调函数来处理 HTML 解析器解析出的每个标签，它会依次输出标签名、标签属性和文本。这样设计的好处是能够针对某些特定的标签做一些特定的操作，从而简化开发。
使用 HTML-Parser 做 HTML 字符串的操作
HTML-Parser 结合 JavaScript 能够非常方便地对 HTML 字符串做一些操作。下面，我们来看一些常见的操作。
4.1 获取所有标签
-- -------------------- ---- -------
----- ------ - --- -------------
----- ---- - --------------
---- ------------------
--------------
--------------
------
---
----- ------- - ---
-------- ---------------- -
-----------------------
------------- -- ----------------------------------
-
-----------------
---------------------输出结果：
[ 'div', 'h1', 'p' ]
在上面的例子中，我们使用 getAllTags 函数获取 HTML 树状结构中所有的标签，并将这些标签存储在 allTags 数组中。最后输出 allTags 数组，即可得到所有的标签。
4.2 获取某个标签的属性值
-- -------------------- ---- -------
----- ------ - --- -------------
----- ---- - --------------
---- ------------------
--------------
--------------
------
---
-------- ------------------ ---- ----- -
-- --------- --- ---- -
------ ----------------
-
---- -- --------------- -
--- ---- - - -- - - --------------------- ---- -
----- ----- - ------------------------------ ---- ------
-- ------- -
------ ------
-
-
-
-
------------------------------ ------ ----------输出结果：
container
在上面的例子中，我们使用 getAttrValue 函数获取 HTML 树状结构中某个标签的某个属性值。这个函数会递归遍历 HTML 树状结构，找到第一个匹配的标签，并返回它的指定属性值。
4.3 获取所有的文本内容
-- -------------------- ---- -------
----- ------ - --- -------------
----- ---- - --------------
---- ------------------
--------------
--------------
------
---
----- ------- - ---
-------- ---------------- -
-- ----------- -
------------------------
-
------------- -- ----------------------------------
-
-----------------
---------------------输出结果：
[ 'Title', 'Content' ]
在上面的例子中，我们使用 getAllText 函数获取 HTML 树状结构中所有的文本内容，并将这些文本内容存储在 allText 数组中。最后输出 allText 数组，即可得到所有的文本内容。
总结
HTML-Parser 是一款简单易用的 HTML 解析工具。本文介绍了它的基本用法以及如何使用 HTML-Parser 做 HTML 字符串的操作。通过学习本文，你能够更加便捷地处理 HTML 字符串，提高开发效率。附上示例代码，感兴趣的同学可以试试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a54de403f2923b035c07e