整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章給大家介紹一個解析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小時內與您取得聯系。
