正值表示式匹配html標籤的屬性值

正規表示式是做文字解析工作必不可少的技能。如Web伺服器日誌分析，網頁前端開發等。很多高階文字編輯器都支援正規表示式的一個子集，熟練掌握正規表示式，經常能夠使你的一些工作事半功倍。例如統計程式碼行數，只需一個正則就搞定。巢狀Html標籤的匹配是正規表示式應用中一個比較難的話題，因為它涉及到的正則語法比較多，也比較難。因此也就更有研究的價值。

今天由於工作的需求，需要獲取html標籤的屬性值，立即想到了正規表示式，標籤如下：

<circle id="ap_test" cx="200" cy="2000" r="2" stroke="black" stroke-width="0" fill="red"/>
<circle id="ap_test" cx="201" cy="2001" r="2" stroke="black" stroke-width="0" fill="red"/>
<circle id="ap_test" cx="202" cy="2002" r="2" stroke="black" stroke-width="0" fill="red"/>
<circle id="ap_test" cx="203" cy="2003" r="2" stroke="black" stroke-width="0" fill="red"/>

需要獲取<circle />標籤的cx、cy的屬性值，想了一會寫出了一個：

$circle是上面的circle標籤的內容

preg_match_all('/<\s*circle\s+[^>]*?cx\s*=\s*(\'|\")(.*?)\\1[^>]*?cy\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i', $circle, $arr);
var_dump($arr);

$arr[2]是cx的值 ，$arr[4]是cy的值.

下面給大家介紹下正則匹配閉合HTML標籤（支援巢狀）

任何複雜的正規表示式都是由簡單的子表示式組成的，要想寫出複雜的正則來，一方面需要有化繁為簡的功底，另外一方面，我們需要從正則引擎的角度去思考問題。關於正則引擎的原理，推薦《Mastering Regular Expression》中文名叫《精通正規表示式》。挺不錯的一本書。

OK，先確定我們要解決的問題——從一段Html文字中找出特定id的標籤的innerHTML。

這裡面最大的難點就是，Html標籤是支援巢狀的，怎麼能夠找到指定標籤相對應的閉合標籤呢？

我們可以這樣想，先匹配最前面的起始標籤，假設是div吧（<div），接著一旦遇到巢狀div，就“壓入堆疊”，後面如果遇到div閉合標籤了，就“彈出堆疊”。如果遇到閉合標籤的時候，堆疊裡面已經沒有東西了，那麼匹配結束，此結束標籤為正確的閉合標籤。

我之所以能夠這樣去思考，是因為我瞭解過正則的特性，我知道正則中的平衡組能夠實現我剛才說的“堆疊”操作。所以，如果我們要編寫複雜正規表示式，需要對正則的一些高階特性至少有所瞭解，這樣我們思考問題才有個方向。

================================

匹配任意閉合HTML標籤的正規表示式：

<(?<HtmlTag>[\w]+)[^>]*?>((?<Nested><\k<HtmlTag>[^>]*>)|</\k<HtmlTag>>(?<-Nested>)|.*?)*</\k<HtmlTag>>

如果只想匹配div標籤，可以使用下面的正規表示式：

<(?<HtmlTag>div)[^>]*?>((?<Nested><\k<HtmlTag>[^>]*>)|</\k<HtmlTag>>(?<-Nested>)|.*?)*</\k<HtmlTag>>

是的，你可以把div修改成任意你想要匹配的HTML標籤

如果想同時匹配多個HTML標籤，可以使用下面的正規表示式：
<(?<HtmlTag>(div|span|h1))[^>]*?>((?<Nested><\k<HtmlTag>[^>]*>)|</\k<HtmlTag>>(?<-Nested>)|.*?)*</\k<HtmlTag>>
你還可以繼續新增更多要匹配的標籤

如果想匹配包含ID的標籤，可以使用下面的正規表示式：

<(?<HtmlTag>[\w]+)[^>]*\s[iI][dD]=(?<Quote>["']?)footer(?(Quote)\k<Quote>)[^>]*?(/>|>((?<Nested><\k<HtmlTag>[^>]*>)|</\k<HtmlTag>>(?<-Nested>)|.*?)*</\k<HtmlTag>>)

這個正則匹配任意id為footer的HTML標籤