HTML Agility Pack：簡單好用的快速 HTML Parser

HTML Agility Pack：簡單好用的快速 HTML Parser

Codeplex 軟體套件（Package）資訊
套件名稱	HTML Agility Pack
作者	Simon Mourier
目前版本	1.4.0 Beta 2
URL	http://htmlagilitypack.codeplex.com/
使用難易度	中
使用此套件時可用的輔助工具	HAP Explorer（可在上述 URL 找到） Internet Explorer 8 開發者工具
基礎知識	HTML XML 和 XPath 最好有使用過 System.Xml 命名空間中的 XmlDocument 類別，以及其 SelectNodes() 或 SelectSingleNode() 方法。

解析 HTML：Web 開發人員心中的痛

自從 Web 應用程式自 1993 年 W3C 設立以來就開始發展，而且 HTML 也歷經了數個版本的演化（1.0 – 2.0 – 3.0 – 3.2 – 4.0 – 4.01），現在也已經成為Web網頁或應用程式的最基礎，想要學習如何設計 Web 網頁或開發 Web 應用程式，這已經是絕對必須要學的東西了，就算是方便的控制項充斥（例如 ASP.NET），但 HTML 仍然有學習它的必要性，因此如果不會 HTML，就等於沒學過 Web 網頁般。

拜 HTML 與 Web 瀏覽器蓬勃發展之賜，各式各樣的應用都在網路上迅速發展，舉凡電子商務、企業入口、線上下單、企業間協同應用等，乃至於社群、個人化、Web 2.0 等商務與組織運用等能力，而在資訊爆炸的時代，很多資訊整合的應用也隨之出爐，而這些資訊整合的應用程式都會連接到不同的網站下載其資訊，並且在重重的 HTML 中剖析出想要的資料（例如每股價格、漲跌幅、成交量等）。

但是 HTML 本身並不是一個結構嚴謹的語言，它允許標籤（tag）可以在不 close 的情況下繼續使用。這也是因為瀏覽器設計的高容錯性（Fault Tolerance）所致，如此一來，想要依照規則來剖析 HTML 文件幾乎變得不可能，而且對方的網站的 HTML 結構也可能會隨時變化，在這種情況下，剖析 HTML 變得非常辛苦，雖然 W3C 有另外推展 XHTML（遵守 XML 嚴謹格式的 HTML），但使用它來設計網頁的案例仍為少數，大多數的網站仍然是使用 HTML。因此我們會需要一個工具，能夠有方法快速的解析 HTML 以取出我們需要的資料。

傳統解析 HTML 的方法

大家都知道，HTML 本身其實只是一個 HTML 標記的字串而已，因此一般說到要解析 HTML，第一個會想到的大概就是字串比對（string comparison），自己針對 HTML 的結構寫一個 pattern，然後由函式去做逐一的比對，例如：

[C#]

1. string pattern = "<td id='stockPrice'>";
2. html.IndexOf(pattern);

不過傳統的字串比對效能太差，也沒有一個規則性，因而才發展出規則運算式（Regular Expression）技術，例如下列這樣的語法：

[Regular Expression]

1. </?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)/?>

來源： http://haacked.com/archive/2005/04/22/Matching_HTML_With_Regex.aspx　

但 Regular Expression 的學習曲線很高，若要使用它來解析 HTML，並且再加以客制化（Customization）的話，對於一般開發人員來說，實在沒有什麼親和力。

HTML 還有一個特色，就是它是具階層性（Hierarchy）的，因此瀏覽器在解譯它的時候都會以文件樹（document tree）的方式，再用遞迴（recursive）的方法來處理它，但 Regular Expression 沒有支援階層性的剖析，而最接近階層剖析又好用的工具，莫過於 XML Parser 了，它的 DOM 以及 XPath 的特性，都可以讓解析 XML 的工作變得輕鬆，然而 XML Parser 無法讀取一般的 HTML（XHTML 可以），因為一般的 HTML 是結構鬆散的類型，XML Parser 會在讀入時檢查語法結構是否完整（也就是 Well-known 的結構），若讀入的是結構鬆散的內容的話會擲出例外訊息，因此無法直接使用 XML Parser 來輔助。

HTML 文件樹（IE8 開發者工具）

不過，現在已經有人發展出可以在 HTML 上面使用類似於 XPath 的方式來存取鬆散結構的 HTML 的工具，並且在 Codeplex 上以開放原始碼的方式公開給外界使用，這個工具就是本文所要介紹的 HTML Agility Pack。

HTML Agility Pack 簡介

HTML Agility Pack 是由法國的一位軟體架構師 Simon Mourier 所發展，並且由 DarthObiwan 以及 Jessynoo 輔助開發出來的一個軟體工具，它可以讓剖析鬆散格式 HTML 的工作就像剖析 XML 一樣簡單，它也有類似於 System.Xml 命名空間中的 XML DOM 的許多類別，除了可以使用階層的方式存取 HTML 以外，它也支援使用 XPath 的方式來搜尋 HTML，這會較以往使用文字比對或是 Regular Expression 的比對方式來得更明確，例如：

上圖中以藍色方框框住的是 W3C 的最新消息公告區，而它的 HTML 階層樹是這個樣子：

以往要使用 Regular Expression 剖析時可能要走很多步驟（Match 會回傳很多資料，除非寫的夠精準），才會到達方框所在的位置，但使用 HTML Agility Pack 元件時，我們能用這樣的語法：

[XPath]

1. /html[1]/body[1]/div[1]/div[2]/div[3]/div[2]/div[1]/div[1]/div[1]

就到達我們想要的地點，這個語法和 XPath 相當類似，對於熟悉 XPath 或是 DOM 的開發人員會比較有利。HTML Agility Pack 元件的類別階層和 XML DOM Parser 其實蠻像的，若先前有用過 XML DOM 的開發人員會覺得很熟悉：

HTML Agility Pack 元件的類別階層

这是个很好的的东西，以前做Html解析都是在用htmlparser，用的虽然顺手，但解析速度较慢，碰巧今天找到了这个，就拿过来试，一切出乎意料，非常爽，推荐给各位使用。

下面是一些简单的使用技巧，希望对大家有用，我个人也是个学习过程。

Why Html Agility Pack? (以下简称HAP)

.Net下解析HTML文件有很多种选择，包括微软自己也提供MSHTML用于manipulate HTML文件。但是，经过我一段时间的搜索，Html Agility Pack浮出水面：它是Stackoverflow网站上推荐最多的C# HTML解析器。HAP开源，易用，解析速度快。

How to use HAP?

1. 下载http://htmlagilitypack.codeplex.com/

2. 解压

3. 在Visual Studio Solution里，右击project -> add reference -> 选择解压文件夹里的HTMLAgilityPack.dll -> 确定

4. 代码头部加入 using HtmlAgilityPack;

HtmlWeb webClient = new HtmlWeb();  
    HtmlDocument doc = webClient.Load("http://xxx");  
      
    HtmlNodeCollection hrefList = doc.DocumentNode.SelectNodes(".//a[@href]");  
      
    if (hrefList != null)  
    {  
         foreach (HtmlNode href in hrefList)  
         {  
            HtmlAttribute att = href.Attributes["href"];  
            doSomething(att.Value);  
      
         }  
      
    }

Q: 如何根据ID选择HTML结点？

A: 利用@id='xxx', e.g.,

HtmlNode bugSum = doc.DocumentNode.SelectSingleNode("//h2[@id='summary']");

Q: 如何得到结点的文字内容或Html内容？

node.InnerText.Trim()  
    node.InnerHtml  
    node.OuterHtml

Q: 如何在html树结构下查找结点？

A: 比如从根节点查找id=container的div下的第一个table:

HtmlNode table = doc.DocumentNode.SelectSingleNode("//div[@id='container']/table[1]");

注意路径里"//"表示从根节点开始查找，两个斜杠‘//’表示查找所有childnodes；一个斜杠'/'表示只查找第一层的childnodes（即不查找grandchild）；点斜杠"./"表示从当前结点而不是根结点开始查找。接上一行代码，比如要查找table所有直接子结点的tr:

HtmlNodeCollection tr = table.SelectNodes("./tr");

Q: 如何得到结点的ID？

A： 很简单： node.ID

Q: 如果一段html存在字符串里，是否可以用Html Agility Pack进行处理？

A：可以，先将字符串load进来，之后的处理方法一样：

<pre name="code" class="csharp">//load the original html  
    string html = "some html stuff"  
    HtmlDocument doc = new HtmlDocument();  
    doc.LoadHtml(@html);

Q: 我对load进来的html进行了一些处理，比如改变了一些结点内容，删除了一些结点什么的，为什么结果却没有变化？

A: 也许你忘记save你对html的改变了，假设html存在字符串中：

//load the original html  
    string html = "some html stuff"  
    HtmlDocument doc = new HtmlDocument();  
    doc.LoadHtml(@html);  
      
    //make some changes  
    doSomething();  
      
    //save the change  
    var sb = new StringBuilder();  
    using (var writer = new StringWriter(sb))  
    {  
        doc.Save(writer);  
    }

Q: 如何去掉外层的html tag只留下内容？

A: 用remove方法。假设结点<a href=xxx>ABCD</a>，你想留下ABCD而不要<a></a>，那你需要先得到这个Html结点，假设叫link:

link.ParentNode.RemoveChild(link,true);

参数true表示留下grandchild，在这里即内容ABCD; false表示将此结点连同其grandchilds一起删除。

规则有很多，网上提供了源代码，可以研究一下，还有源代码有乱码问题，是字符集的问题，只需要写一个方法来自动判断就可以解决了

如上面的說明，我們可以撰寫這樣的程式碼來讀取 W3C 首頁公布的最新消息的清單：

[C#]

1. using HtmlAgilityPack;
2. public static void Main(string[] args)
3. {
4. HtmlWeb webClient = new HtmlWeb();
5. HtmlDocument doc = webClient.Load("http://www.w3.org/");
6. HtmlNodeCollection nodes = doc.DocumentNode.SelectNodes("/html[1]/body[1]/div[1]/div[2]/div[3]/div[2]/div[1]/div[1]/div[1]/div");
7. foreach (HtmlNode node in nodes)
8. {
9. Console.WriteLine(node.InnerText.Trim());
10. }
11. doc = null;
12. nodes = null;
13. webClient = null;
14. Console.WriteLine("Completed.");
15. Console.ReadLine();
16. }