用法简介

安装

const { Parser } = require('htmlparser2');const parser = new Parser(handler, options);parser.parseComplete('html/xml内容');

写法

const { Parser } = require('htmlparser2');const parser = new Parser(handler, options);parser.parseComplete('html/xml内容');

htmlparser2提供了一个解析器——Parser，初始化它至少需要一个handler，options是可选的。

handler是一个对象，在这个对象上可以设置很多的钩子函数，Parser解析时会在每个阶段运行对应的钩子函数。

以下是可以设置的所有的钩子函数，

onopentag(<str> name, <obj> attributes)

onopentagname(<str> name)

onattribute(<str> name, <str> value)

ontext(<str> text)

onclosetag(<str> name)

onprocessinginstruction(<str> name, <str> data)

oncomment(<str> data)

oncommentend()

oncdatastart()

oncdataend()

onerror(<err> error)

onreset()

onend()

htmlparser模块是通过正则表达式来解析html内容的，而htmlparser2则不同，它会按顺序读取html的每个字符，并且推测后面字符是标签名、属性还是其他的类型，所以htmlparser2在解析完每一个标签后都会运行相应的钩子函数。

先来看一下例子，

图1

图1中设置了所有的钩子函数以便来说明每个钩子函数的作用，运行一下，

图2

对照图1和图2就能看出来每个钩子函数的运行时机，这其中有以下几个钩子函数需要注意一下。

oncdatastart和oncdataend会在解析<![CDATA[文本]]>标签时触发，但是触发的前提是选项设置了recognizeCDATA=true或者xmlMode=true；
onprocessinginstruction会在解析<!xxyy>或者<?xxyy>这样的标签时触发，xx和yy中间可以有分隔符（斜杠或者空格），分隔符前面的字符串就是钩子函数中的name的值；
运行parseComplete方法会执行reset钩子函数，如果仅仅执行parser的write或者end方法并不会执行reset方法。

除了自定义handler以外，htmlparser2还提供了几个handler，比如DomHandler，用法如下：

图3

运行一下，我们看看结果，

图4

如果4所示，DomHandler处理的结果是以数组的形式输出的，在每个单元数据中还可以拿到上一个、下一个以及父节点的数据。

htmlparser2还可以通过操作流Stream解析内容，写法如下：

图5

总结

这篇文章和上一篇是姊妹篇，都是介绍解析html/xml内容的模块，通过对比，我们发现htmlparser2模块功能更强大一些，也更灵活一些，同时也兼容htmlparser模块的一些接口。虽然两者功能类似，但是这给了我们更多的选择性。