在前端开发中，我们经常需要对HTML进行解析，然而原生的DOM解析方式比较昂贵，对于大规模的HTML解析并不友好。而SAXML是一个高效、轻量的HTML解析器，本文将会详细介绍如何使用npm包saxml进行HTML解析。
1. 安装
使用npm安装saxml：
npm install saxml
2. 使用
2.1 基本使用
saxml提供了一个parse方法，传入HTML文本，并提供回调函数，在解析完成HTML节点时执行回调函数，可以通过回调函数来处理HTML的节点数据。
-- -------------------- ---- -------
----- ----- - -----------------
----- ---- - -
------
------
----------------------
-------
------
---------- -----------
------- -- ------- ---- ------------
-------
-------
--
----------------- -------------- -
------------------
---在这个例子中，我们打印每个节点对象。一个节点对象有以下属性：
name节点的名称，例如title、body、p等。attrs节点的属性，例如class、id等。text节点的文本内容，例如Hello, World!和This is example HTML content.。isSelfClosing节点是否是自闭合节点，例如<br>。
输出：
-- -------------------- ---- ------- - ----- -------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ----- ------ --- ----- ------- -------- -------------- ----- - - ----- ---- ------ --- ----- ----- -- ------- ---- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- --- -------------- ----- -
我们可以看到saxml.parse方法解析出了HTML中的每个节点，并按解析顺序生成节点对象。
2.2 设置选项
saxml提供了三个选项，可以在saxml.parse方法中进行设置。
2.2.1 ignoreAttrs选项
如果设置ignoreAttrs为true，saxml将不会解析节点的属性信息。在某些情况下，我们并不需要节点的属性信息，此时可以将ignoreAttrs选项设置为true。
saxml.parse(html, function(node) {
console.log(node);
}, { ignoreAttrs: true });输出：
-- -------------------- ---- ------- - ----- -------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ----- ------ --- ----- ------- -------- -------------- ----- - - ----- ---- ------ --- ----- ----- -- ------- ---- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- --- -------------- ----- -
可以看到，节点对象中的attrs属性被清空了。
2.2.2 lowerCaseTags选项
如果设置lowerCaseTags为true，saxml将会将所有节点名称转换为小写。
saxml.parse(html, function(node) {
console.log(node);
}, { lowerCaseTags: true });输出：
-- -------------------- ---- ------- - ----- -------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ----- ------ --- ----- ------- -------- -------------- ----- - - ----- ---- ------ --- ----- ----- -- ------- ---- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- --- -------------- ----- -
可以看到，所有节点的名称都变成了小写。
2.2.3 trimText选项
如果设置trimText为true，saxml将会去掉所有节点文本内容的前后空格。
-- -------------------- ---- -------
----- ------------- - -
------
------
-------------- --------
-------
------
---------- ------ -----
------- -- ------- ---- -------- ----
-------
-------
--
-------------------------- -------------- -
------------------
-- - --------- ---- ---输出：
-- -------------------- ---- ------- - ----- -------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ----- ------ --- ----- ------- -------- -------------- ----- - - ----- ---- ------ --- ----- ----- -- ------- ---- ---------- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- ------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- --- -------------- ----- -
可以看到，所有节点的文本内容的前后空格都被去掉了。
2.3 使用事件流
除了回调方式外，saxml还提供了一个DOM事件的方式来解析HTML。
-- -------------------- ---- -------
----- ----- - -----------------
----- ---- - -
------
------
----------------------
-------
------
---------- -----------
------- -- ------- ---- ------------
-------
-------
--
----- ------ - ---------------------
---------------- ------------- -
------------------ ---- ---------
---
----------------- -------------- -
------------------ ----------
---
--------------------- ------------- -
---------------- ---- ---------
---
-------------------
---------------使用事件流方式时，我们需要先使用saxml.createStream方法创建一个解析器的实例。之后我们可以对解析器绑定tag、text、closetag事件，saxml在解析到相应的节点时会触发这些事件，并通过回调函数传递相应的数据。
输出：
-- -------------------- ---- ------- ----- ---- ---- ----- ---- ---- ----- ---- ----- ----- ------- --- ---- ----- --- ---- ---- ----- ---- ---- ----- ---- -- ----- ------ ------ --- ---- -- ----- ---- - ----- ---- -- ------- ---- -------- --- ---- - --- ---- ---- --- ---- ----
可以看到，事件流解析HTML的方式更加逐行读取，可以更加灵活地处理HTML数据。
3. 示例
下面是一个在saxml中使用纯文本节点的例子。传递一个以\n分隔的纯文本字符串，用saxml.parse方法将其解析成多个文本节点。
-- -------------------- ---- -------
----- ----- - -----------------
----- ---- - ----------------------------------------------------
----- -------- - -
----- --------
------ ---
----- ---
-------------- ------
--------- ---
--
--- ----------- - ---------
------------------------------- -- -
-- ------- -
-------
-
----- -------- - -
----- --------
------ ---
----- -----
-------------- ------
--
------------------------------------
-- ----------------- --- -------- -
---------------- -- -----
-
-- ----------------- --- -------- -
---------------- -- -----
-
---
--------------------- -------------- -
------------------
---输出：
-- -------------------- ---- ------- - ----- -------- ------ --- ----- --- -------------- ----- - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ---------- -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ---------- -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ---------- -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ------ -------------- ------ ------- - --- - - - ----- -------- ------ --- ----- ---------- -------------- ------ ------- - --- - -
我们传递了一个以\n分隔的文本字符串，并按每一行解析生成一个文本节点。可以看到，saxml提供了非常灵活的解析方式，可以适应各种场景下的解析需求。
4. 总结
saxml是一个高效、轻量的HTML解析器，在对大规模的HTML数据进行解析时，有更好的解析效率和更少的内存占用。saxml提供了回调和事件两种解析方式，并且支持各种选项，可以满足各种不同的解析需求。在使用saxml时，可以根据具体情况选用相应的解析方式和选项，来最大化地提高HTML解析的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e2d9381d61a3540999