XPath是一個好工具

楊帥發表於2014-02-23

我第一次接觸XPath是在2007年,但最近才開始對它產生興趣。以前在大多數情況下我都會盡量避免使用它,而當我不得不嘗試使用它時,每次都以失敗告終。那時XPath對我來說並沒有什麼意義。

但是後來我遇到了一個特殊的解析問題(對CSS選擇器來說過於複雜,而用手工程式碼的話又過於簡單),於是我決定再嘗試一次XPath。令我感到驚喜的是,這的確行得通,而且很有用。

以下是我的親身經歷

我遇到的問題

假設你管理一個歌詞網站,為了維持一致的閱讀體驗,你要收集每行歌詞的第一個單詞。如果歌詞使用純文字格式儲存,那麼可以直接用下面的程式碼來實現。

但是如果歌詞被儲存肯html格式就沒有這麼簡單了,因為dom結構本身並沒有”行”的概念,所以沒有辦法使用一個簡單的正規表示式來識別行。

所以我們要做的第一件事情是定義什麼是dom結構中的“行的起點”,下面是兩個簡單的例子:

  • <p>標籤中第一個文字節點
  • <br>後面的第一個文字節點

就像下面這樣:

但是除此之外我們可能還要處理巢狀的行內元素:

常規的解決方案

我想到的第一個解決方法是用Ruby寫一個方法來掃描dom中所有相關的部分並遞迴找出所有符合條件的節點。其中用到了幾個輕量級的css選擇器:

這是一個比較合理的解決方案,但是11行的程式碼似乎有點兒長。有點兒殺雞用牛刀的感覺,僅僅為了獲得dom的節點而用上Ruby的迭代器和條件語句感覺有點兒犯不上。應該有更好的辦法吧?

終於說到正題了(XPath)

XPath有一下幾個原因容易讓人困惑。第一點是網上幾乎沒有可以參考的東西(W3Schools!就不用想了)。RFC已經是我找到的最好的文件了。

第二點是XPath看上去有點兒像CSS。方法名裡就有“path”,所以我總是假設XPath的表示式中的 / 和CSS選擇器中的 > 是一個意思。

其實,XPath表示式包含了許多簡寫,如果我們想要弄清楚上面程式碼執行時究竟發生了什麼就必須要弄清楚這些簡寫。下面是用全拼寫出來的相同的表示式:

這個XPath表示式和上面的CSS選擇器的作用是一樣的,但並不像我之前假設的那樣。一個XPath表示式是由一個或多個被 / 分割的定位步(location steps)組成。表示式中的第一個 / 代表了文件(document)的根節點。每個定位步都表明了已經被匹配的節點並傳達一下三條資訊:

我想從當前的位置移動到哪?

答案是軸(Axis),是可選的。預設的軸是child,表示“當前被選中節點的所有子節點”。在上面的例子中,descendant-or-self是第一個定位部的軸,表示“所有當前被選中的節點和他們所有的子節點”。大部分XPath規範中定義的軸都有像“descendant-or-self”這樣的語義化的名字。

我想要選擇什麼型別的節點?

選擇的內容是由節點測試來指定的,這也是每個定位步中不可缺少的部分。在我們之前的例子中,node()匹配的是全部型別;text()匹配到的是文字節點;element()只能匹配到元素,並必須指明節點名稱(像p,em等),節點名稱必填。

可能增加額外的過濾器嗎?

也許我們只想選擇當前所有節點的第一個子元素或只想選則有href屬性的<a>標籤。對於此類斷言(assertion),我們可以使用謂詞(predicates)根據額外的遍歷樹(additional tree traversals)來過濾出符合條件的節點。這樣我們就可以根據這些節點的屬性(children, parents, or siblings)來過濾出符合條件的節點。

我們的例子中沒有謂詞,現在讓我們來加一個只匹配有href屬性的<a>標籤:

雖然謂詞看上去很像一個括號中的定位步,但是謂詞中的“節點測試(node test)”部分有比定位步中的節點測試更多的功能。

換一個角度來看XPath

與一個增強型的CSS選擇器相比,XPath與JQuery的便利更相似。例如,我們可以把之前的XPath表示式換成JQuery的形式:

上面的程式碼中,我們用到的JQuery的方法與軸的作用是一樣的:

JQuery方法中的選擇器相當於XPath中的節點測試,只可惜jQuery不允許選擇文字節點。

jQuery中的.filter()方法相當於XPath中的謂詞,.children(’em’)的作用是匹配所有匹配到的<p>標籤中的所有<em>子元素。這樣看來,XPah要比jQuery強大得多。

讓我們回到識別行首的問題

現在我們對XPath的工作原理已經有了深入的瞭解,下面來用它解決之前提到的問題。首先我們先把問題簡化一下,只尋找每段的第一個文字節點:

上面的程式碼的作用依次是:

  • 1.尋找文件中的所有節點
  • 2.尋找這些節點的所有為<p>的子節點
  • 3.尋找這些<p>的文字子節點
  • 4.只保留這些節點中符合條件的第一個元素

注意position() function 在程式碼中表示的是每個<p>中的第一個文字子節點而不是整個文件中的第一個<p>的文字子節點。

接下來,為了找到<p>中被巢狀得很深的文字節點,我們把child換成descendant

接下來是識別換行的問題,首先我們給這一長串程式碼折下行(因為太長了),XPath是允許這樣做的。加入換行的識別後,程式碼如下:

每一行程式碼的意思分別是:

  • 1.找到所有節點
  • 2.找到到這些節點的<br>子節點
  • 3.找到這些<br>的下一個同級節點
  • 4.如果上面取到的不是文字節點,則取它們的子節點中的第一個文字節點

這樣一來我們就可以同時選出<p>中和<br>後的新的一行。下面我們以上的程式碼合併成一個表示式:

最後我們把簡寫替換進去:

這樣我們就把一個複雜的概念用一個簡單的表示式表示出來了。如果我們想加入更多的對行的操作,只需要往實現匹配的程式碼中加入更多的元素名稱就可以了。

我們究竟能從中獲得什麼?

既然我們能用相對易懂的Ruby來實現為什麼還要選擇XPath呢?

大多數情況下,Ruby是用來編寫高層程式碼的,例如商業邏輯,整合應用元件,描述複雜的領域模型。從中可以看出最好的Ruby程式碼是用來描述意圖而非用於實現。所以用Ruby來做一些低水平或與應用無關的事情(遍歷dom樹來找指定屬性的節點)讓人蛋疼。

XPath的其中一個優勢是它的速度:XPath的遍歷是通過libxml實現的,而原生程式碼的速度是非常快的。對於我上面舉的例子,與Ruby的實現相比,XPath實際上要慢得多。我猜導致這個情況的原因是對於<br>標籤的下一個元素的查詢。因為在這個動作中實際上是先篩選出了<br>後面的所有與之同級的元素然後才過濾出其中的第一個。

所以XPath快慢與否取決於你的使用方式,但是上手有點兒難。這是一個專門用來讓你使用簡潔的慣用表示式來遍歷dom的工具。

相關文章