这篇文章给大家介绍一个解析html内容的模块——htmlparser。
举一个简单的应用场景:假设有一天领导需要你收集一下线上页面已存在的静态资源链接(js、css、img),你们的页面很多,而且每个页面的代码量很大(比如上万行),这种情况下你总不能人肉去搜索,那么此时htmlparser这个模块就可以派上用场了。
简单使用
安装命令
npm install htmlparser
![f19d37039c68463a957ff343c622c5ce.png](https://i-blog.csdnimg.cn/blog_migrate/b5b01bed855434e13462c64ee0111161.jpeg)
图1
图1中我们使用htmlparser模块解析一个i.html文件,其内容如下:
![52b4ac0e945c3ec38bebe8849de67535.png](https://i-blog.csdnimg.cn/blog_migrate/33001843d4f8f07b2a57bb08f41b8658.jpeg)
图2
解析结果如下:
![1d25b8e73c8e2b328c074e95ccd587a0.png](https://i-blog.csdnimg.cn/blog_migrate/f6789fa670e7c700455e019106b45d83.jpeg)
图3
图3所示是个对象(此处序列化了便于显示),遍历这个对象就可以解决本文开头所说的问题,这个模块的用法非常的简单。
原理分析
回到图1,htmlparser模块给我提供了一个Parser构造函数,这个构造函数是初始化的入口!它大概长这个样子:
function Parser(handler) { this._handler = handler;}
Parser接受一个参数handler,这个handler必须是一个对象,这个对象必须定义以下几个方法:
- reset方法主要做一些重置工作;
- done方法完成解析后调用,此处可以执行自定义回调函数;
- writeTag方法处理tag标签;
- writeText方法处理纯文本信息
- writeComment方法处理注释信息;
- writeDirective方法处理这样的标签信息,比如。
图1中我们使用的是模块内部提供的DefaultHandler,我们当然也可以自己定义handler。用别人的handler有时并不能完全满足自己的业务场景,那么我们操作一把,代码如下:
![31643b031857b204bc30af5161dd057e.png](https://i-blog.csdnimg.cn/blog_migrate/91d93a277d19029a38abbab1aeecf8a0.jpeg)
图4
图4中我们自定义一个handler——CustomHandler,我们先运行一下看看各个方法都输出了什么?
![2ef0de894ac0e41f9c349de9fe1a18fb.png](https://i-blog.csdnimg.cn/blog_migrate/4b8b0b97f2ba3bec92866b882759661c.jpeg)
图5
图5中CustomHandler的各个方法按照原始字符串的顺序依次打印出了每个解析结果,这些解析结果是parser对象为我们自动生成的,解析的原理就是正则匹配。我们可以在自定义handler的各个函数方法中做一些特殊处理,然后把最终的结果通过done函数输出出去。
图4中的parseComplete方法也可以用以下逻辑代替,
parser.reset();parser.parseChunk(html);parser.done();
这个模块除了可以在node环境中使用,它同时也可以在浏览器中使用,用法如下:
![6831a9a9386bca9556668fa855536e4d.png](https://i-blog.csdnimg.cn/blog_migrate/38a1e33639e1fc51b5731db2e1780fc3.jpeg)
图6
![5805dabe44d0280d868842b44ba838ab.png](https://i-blog.csdnimg.cn/blog_migrate/8a9c05658552acbf2790210341073411.jpeg)
图7
注意,如果在浏览器中使用,模块的所有API都挂在了Tautologistics.NodeHtmlParser这个对象上,其它用法一致。
总结
需要我们去解析html内容的场景非常多,之前我们更多的是使用自己写的正则表达式去做,麻烦并且容易出错。现在我们了解了htmlparser模块,以后就可以直接使用它去解决问题。