整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
篇文章给大家介绍一个解析html内容的模块——htmlparser。
举一个简单的应用场景：假设有一天领导需要你收集一下线上页面已存在的静态资源链接（js、css、img），你们的页面很多，而且每个页面的代码量很大（比如上万行），这种情况下你总不能人肉去搜索，那么此时htmlparser这个模块就可以派上用场了。
安装命令
npm install htmlparser图1
图1中我们使用htmlparser模块解析一个i.html文件，其内容如下：
图2
解析结果如下：
图3
图3所示是个对象（此处序列化了便于显示），遍历这个对象就可以解决本文开头所说的问题，这个模块的用法非常的简单。
回到图1，htmlparser模块给我提供了一个Parser构造函数，这个构造函数是初始化的入口！它大概长这个样子：
function Parser(handler) {
this._handler = handler;
}Parser接受一个参数handler，这个handler必须是一个对象，这个对象必须定义以下几个方法：
图1中我们使用的是模块内部提供的DefaultHandler，我们当然也可以自己定义handler。用别人的handler有时并不能完全满足自己的业务场景，那么我们操作一把，代码如下：
图4
图4中我们自定义一个handler——CustomHandler，我们先运行一下看看各个方法都输出了什么？
图5
图5中CustomHandler的各个方法按照原始字符串的顺序依次打印出了每个解析结果，这些解析结果是parser对象为我们自动生成的，解析的原理就是正则匹配。我们可以在自定义handler的各个函数方法中做一些特殊处理，然后把最终的结果通过done函数输出出去。
图4中的parseComplete方法也可以用以下逻辑代替，
parser.reset();
parser.parseChunk(html);
parser.done();这个模块除了可以在node环境中使用，它同时也可以在浏览器中使用，用法如下：
图6
图7
注意，如果在浏览器中使用，模块的所有API都挂在了Tautologistics.NodeHtmlParser这个对象上，其它用法一致。
需要我们去解析html内容的场景非常多，之前我们更多的是使用自己写的正则表达式去做，麻烦并且容易出错。现在我们了解了htmlparser模块，以后就可以直接使用它去解决问题。
篇文章给大家介绍一个解析html内容的模块——htmlparser。
举一个简单的应用场景：假设有一天领导需要你收集一下线上页面已存在的静态资源链接（js、css、img），你们的页面很多，而且每个页面的代码量很大（比如上万行），这种情况下你总不能人肉去搜索，那么此时htmlparser这个模块就可以派上用场了。
安装命令
npm install htmlparser图1
图1中我们使用htmlparser模块解析一个i.html文件，其内容如下：
图2
解析结果如下：
图3
图3所示是个对象（此处序列化了便于显示），遍历这个对象就可以解决本文开头所说的问题，这个模块的用法非常的简单。
回到图1，htmlparser模块给我提供了一个Parser构造函数，这个构造函数是初始化的入口！它大概长这个样子：
function Parser(handler) {
this._handler = handler;
}Parser接受一个参数handler，这个handler必须是一个对象，这个对象必须定义以下几个方法：
图1中我们使用的是模块内部提供的DefaultHandler，我们当然也可以自己定义handler。用别人的handler有时并不能完全满足自己的业务场景，那么我们操作一把，代码如下：
图4
图4中我们自定义一个handler——CustomHandler，我们先运行一下看看各个方法都输出了什么？
图5
图5中CustomHandler的各个方法按照原始字符串的顺序依次打印出了每个解析结果，这些解析结果是parser对象为我们自动生成的，解析的原理就是正则匹配。我们可以在自定义handler的各个函数方法中做一些特殊处理，然后把最终的结果通过done函数输出出去。
图4中的parseComplete方法也可以用以下逻辑代替，
parser.reset();
parser.parseChunk(html);
parser.done();这个模块除了可以在node环境中使用，它同时也可以在浏览器中使用，用法如下：
图6
图7
注意，如果在浏览器中使用，模块的所有API都挂在了Tautologistics.NodeHtmlParser这个对象上，其它用法一致。
需要我们去解析html内容的场景非常多，之前我们更多的是使用自己写的正则表达式去做，麻烦并且容易出错。现在我们了解了htmlparser模块，以后就可以直接使用它去解决问题。
、匹配HTML开始标签及结束标签
这段正则，为什么比网上搜索的复杂一些呢？主要是加了匹配特测情况的问题，避免BUG。
举例：<div debug=">" ></div>
const reg_tags = /<((["'])+.*?|[^>])+>/g;开始和结束
2、匹配HTML开始标签
const reg_tag_start = /<[^\\/]((["'])+.*?|[^>])+>/开始
3、匹配HTML结束标签
const reg_tag_end = /<[\\/]+[^<>]*>*/结束
4、匹配HTML标签属性
const reg_tag_attrs = /(?<=\s)[\w:-]+(=(["']).*?)*/g;标签属性
5、获取HTML标签属性名与值
const reg_tag_attr_info = /(^[^=]+|(?<=(['"])).*?(?=))/g;属性名与值
6、获取HTML标签的名称
const reg_tag_name = /(?<=<[\/\s]*)\w+(?=(\s+(?![\s=])|>))/;标签名称
7、匹配HTML文档类型声明
const reg_doctype = /<!doctype[^<>]*>*/i声明
8、匹配HTML文档注释
const reg_tag_note = /<\!.*?>/注释
9、匹配HTML文本内容
const reg_text = /(?<=<[\w]+.*?>)[\s\S]*?(?=</[\w]*?>)/文本
10、其它
//g 正则表达式后面加g，表示全局匹配。
//i 正则表达式后面加i，表示不区分大小写。
[\u4e00-\u9fa5]，表示匹配中文。
中文
[^\x00-\xff\u4e00-\u9fa5]，表示匹配中文符号
中文符号
以上正则表达式，是在写一个生成HTML抽象语法树的工具时，不断摸索出来。如果您有更好的写法，欢迎交流。
人人为我，我为人人，欢迎您的浏览，我们一起加油吧。
*请认真填写需求信息，我们会在24小时内与您取得联系。
