C#正則運算式匹配HTML中的圖片路徑,圖片地址
最近的項目中有個關於網頁取圖的功能需要我自己開發,那就是用Regex來匹配圖片標籤。
一般來說一個 HTML 文檔有很多標籤,比如“<html>”、“<body>”、“<table>”等,想把文檔中的 img 標籤提取出來並不是一件容易的事。由於 img 標籤樣式變化多端,使提取的時候用程式尋找並不容易。於是想要尋找它們就必須寫一個非常健全的Regex,不然有可能會找得不全,或者找出來的不是正確的 img 標籤。
我們可以從 HTML 標籤的格式去想應該怎麼建這個Regex。首先要想一下 img 標籤有幾種寫法,忽略大小寫不看的話,下面列出 img 標籤可能出現的幾種情況。
<img> <img/> <img src=/>
這一些標籤不用考慮,因為沒有圖片資源地址。
<img src = /images/pic.jpg/ > <img src =" /images/pic.jpg" > <img src= '/images/pic.jpg ' / >
這一些標籤都有圖片資源地址,另外還有一個特點就是有引號對,可能為單引號,也可能為雙引號。因為不需要同時匹配引號對,所以Regex可以這麼寫:@"<img\s*src\s*=\s*[""']?\s*(?[^\s""'<>]*)\s*/?\s*>"
<img width="320" height="240" src=/images/pic.jpg onclick="window.open('/images/pic.jpg')">
因為 img 和 src 之間可能會有其他的參數,所以“<img”要有個單詞結束,比如說不能是“<imgabc”,同樣 src 前面也是一樣,使用單詞結束符“\b”有一個好處就是省去了表示空格的“\s*”。另外由於 img 標籤中不可以出現“<”、“>”這樣的符號,所以要改寫前面的Regex:@"<img\b[^<>]*?\bsrc\s*=\s*[""']?\s*(?<imgUrl>[^\s""'<>]*)[^<>]*?/?\s*>"
<img width="320" height="240" src = "
/images/pic.jpg" />
像這種可能會用斷行符號符折行的問題有時候會出現,所以在有空格分開的地方要包含斷行符號換行和 TAB 字元,另外在圖片地址中不能出現空格、TAB、斷行符號和換行字元。所以上面的Regex可以改成:@"<img\b[^<>]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?<imgUrl>[^\s\t\r\n""'<>]*)[^<>]*?/?[\s\t\r\n]*>"
下面寫出取得HTML中所有圖片地址的靜態方法。
/// <summary>
/// 取得HTML中所有圖片的 URL。
/// </summary>
/// <param name="sHtmlText">HTML代碼</param>
/// <returns>圖片的URL列表</returns>
public static string[] GetHtmlImageUrlList(string sHtmlText)
{
// 定義Regex用來匹配 img 標籤
Regex regImg = new Regex(@"<img\b[^<>]*?\bsrc[\s\t\r\n]*=[\s\t\r\n]*[""']?[\s\t\r\n]*(?<imgUrl>[^\s\t\r\n""'<>]*)[^<>]*?/?[\s\t\r\n]*>", RegexOptions.IgnoreCase);
// 搜尋匹配的字串
MatchCollection matches = regImg.Matches(sHtmlText);
int i = 0;
string[] sUrlList = new string[matches.Count];
// 取得匹配項列表
foreach (Match match in matches)
sUrlList[i++] = match.Groups["imgUrl"].Value;
return sUrlList;
}