這篇文章給大家介紹一個解析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必須是一個對象，這個對象必須定義以下幾個方法：
- reset方法主要做一些重置工作；
- done方法完成解析后調用，此處可以執行自定義回調函數；
- writeTag方法處理tag標簽；
- writeText方法處理純文本信息
- writeComment方法處理注釋信息；
- writeDirective方法處理<!…>這樣的標簽信息，比如<!DOCTYPE html>。
圖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建站的代碼和建站方法）
無論是個人還是企業，如果沒有接觸過建站的話，一般都很想知道如何從零開始搭建自己的網站，都有哪些步驟？每一步需要做什么？網站是怎么做出來和上線的？ 企業建站的基礎3元素，分別是域名，…
HTML5從入門到精通的書籍（附：html5學習VIP視頻教程）
隨著科學技術與信息技術急速地發展，IT行業不僅需要理論知識，更需要技術過硬、綜合能力強的實用性人才。為了解決高校畢業生求職時常常因技術經驗不足而被拒之門外這一現象的問題，由千鋒教研…
學校網站模板免費下載（教育網站html源碼）
現如今網站建設真是越來越簡單了，只需要套用網站模板就可以完成網站建設，所以現在大部分的企業都會有自己專屬的網站，當用戶有需要的時候就會前往這些網站進行瀏覽。如今的社會對教育是比較看…
html網站制作案例（精選20個網站建設成功模板）
很多初學者喜歡自己看安裝視頻，研究如何搭建一個網站，因為這樣不僅能夠學到一些關于網站建設的一些基礎知識，還能夠省下一大筆成本。其實如果是搭建一個模板網站并不需要會太高端的編程技術，…
卡片式布局的優點有哪些，html如何實現卡片布局
UI布局有許多種形式，而卡片式作為目前比較常見的一種，也有著它適用和不適用的場景 前言：哪些是卡片 說到卡片式設計，大家的第一反應可能是下面這樣的頁面。 而從廣義上來說，以分隔條分…
個人網站制作方法有哪些，html個人網頁制作步驟
建一個自己的網站的想法很早就有了，可無奈非科班，一些基礎的東西并不了解，就一直擱置著。之后又經歷過不少幾次的嘗試和失敗，又在他人的幫助下，有了確切的方向，開始了自己網站運營的摸索之…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。