html在线解析器解析html网页的方法

本文向您介绍了一个解析html内容的模块——html parser。举一个简单的应用场景：假设有一天领导需要你收集一下线上页面已存在的静态资源链接（js、css、img），你们的页面很多，而且

本文最后更新时间： 2023-04-19 08:18:07

本文向您介绍了一个解析html内容的模块——html parser。

举一个简单的应用场景：假设有一天领导需要你收集一下线上页面已存在的静态资源链接（js、css、img），你们的页面很多，而且每个页面的代码量很大（比如上万行），这种情况下你总不能人肉去搜索，那么此时htmlparser这个模块就可以派上用场了。举一个简单的应用场景:假设有一天领导需要你收集在线页面的现有静态资源链接(js，css，img)。你有很多页面，每个页面都有大量的代码(比如，几万行)。这种情况下不能总是人肉搜索，那么这个模块htmlparser就可以派上用场了。

简单使用

安装命令

npm install htmlparser

图1

图1中我们使用htmlparser模块解析一个i.html文件，其内容如下：

在图1中，我们使用htmlparser模块解析一个i.html文件，其内容如下:

图2

解析结果如下：

分析结果如下:

图3

图3显示了一个对象(为了便于显示，这里进行了序列化)。遍历这个对象可以解决本文开头提到的问题。这个模块的用法非常简单。

原理分析

回到图1，htmlParser模块给我提供了一个解析器构造函数，这是初始化的入口点！看起来是这样的:

function Parser(handler) { this._handler = handler;}

解析器接受参数处理程序，该处理程序必须是一个对象，并且必须定义以下方法:

reset方法主要做一些重置工作；done方法完成解析后调用，此处可以执行自定义回调函数；writeTag方法处理tag标签；writeText方法处理纯文本信息writeComment方法处理注释信息；writeDirective方法处理<!…>这样的标签信息，比如<!DOCTYPE html>。

图1中我们使用的是模块内部提供的DefaultHandler，我们当然也可以自己定义handler。用别人的handler有时并不能完全满足自己的业务场景，那么我们操作一把，代码如下：

在图1中，我们使用模块内部提供的Defaulthandler。当然，我们也可以自己定义处理程序。有时候用别人的handler并不能完全满足自己的业务场景，还是操作一下吧。代码如下:

图4

图4中我们自定义一个handler——CustomHandler，我们先运行一下看看各个方法都输出了什么？

在图4中，我们定义了一个处理程序——CustomHandler。让我们先运行它，看看每个方法输出什么。

图5

图5中CustomHandler的每个方法根据原始字符串的顺序依次打印出每个解析结果。这些解析结果是解析器对象为我们自动生成的，解析的原理是正则匹配。我们可以在自定义处理程序的每个函数方法中做一些特殊处理，然后通过done函数输出最终结果。

图4中的parseComplete方法也可以由下面的逻辑代替，

parser.reset();parser.parseChunk(html);parser.done();

这个模块除了可以在node环境中使用，它同时也可以在浏览器中使用，用法如下：

该模块不仅可以在节点环境中使用，也可以在浏览器中使用。其用法如下:

图6