使用xpath實作document.querySelector樣式選擇器進行html解析（一）：将html轉成xml
使用xpath實作document.querySelector樣式選擇器進行html解析（二）：擴充一下xpath以便支援正則
使用xpath實作document.querySelector樣式選擇器進行html解析（三）：實作樣式選擇器 使用xpath實作document.querySelector樣式選擇器進行html解析（四）：将選擇結果封裝進行輸出-----------------------------------------------------------------
好了，我們繼續下一步，準備實作querySelector。。。。。呃。。。。問問同學們，對樣式選擇器有多大了解，比如 “#main,div .category,div>span.active ~ *”，這個内容都選擇了哪些東西？嗯，扔個html片段上來，然後不要着急向後看，先自己看看能得到什麼結果，再和文盲老顧的答案對照一下，看看你的基礎知識是否掌握的很牢固，嘿嘿
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="category">
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span class="active">頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
</div>
</div>
<div class="nav category">
<ul id="main">
<span class="active">導航1</span>
<span>導航2</span>
<span>導航3</span>
<span>導航4</span>
<span>導航5</span>
</ul>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="category" title="div .category 選中我啦">
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span>頁面頂部分類清單</span>
<span class="active">頁面頂部分類清單</span>
<span title="div>span.active ~ * 選中我啦">頁面頂部分類清單</span>
<span title="div>span.active ~ * 選中我啦">頁面頂部分類清單</span>
<span title="div>span.active ~ * 選中我啦">頁面頂部分類清單</span>
<span title="div>span.active ~ * 選中我啦">頁面頂部分類清單</span>
</div>
</div>
<div class="nav category">
<ul id="main" title="#main 選中我啦">
<span class="active">導航1</span>
<span>導航2</span>
<span>導航3</span>
<span>導航4</span>
<span>導航5</span>
</ul>
</div>
</body>
</html>
不玩了，看看上邊的選擇器到底選中了什麼，首先，需要把逗号作為分隔符，也就是說，上邊的選擇器被分成了三個單獨的選擇器，他們的關系是或的關系，最後的結果是并集
#main
div .category
div>span.active ~ *
嗯。。。。然後。。。說不清楚，先說處理方式。。。。以空白符、大于号、加号、波浪線作為分隔符，将樣式進行再次拆分。。。。這個分别是繼承選擇器、子選擇器、相鄰選擇器和通用選擇器。。。。這個裡邊繼承選擇器和子選擇器很容易實作，分别是//*[name()='div']//*[regex:ismatch('@class','(?<!\w)category(?!\w)')]和//*[name()='div']/*[name()='span']，至于相鄰選擇器和通用選擇器。。。。。稍後再說，這個比較複雜 (╯‵□′)╯︵┻━┻
還有一個需要注意的地方，上邊的選擇器裡，span.active中間沒有空格哦，這個也是在解析時需要處理的地方
經過兩次切分了，現在的選擇器有哪些了呢
div
.category
span.active
*
嗯，span.active也需要拆，拆成兩個樣式，但他們的關系是與的關系，好在這個選擇器可以寫到同一個xpath的條件裡
然後，還需要實作諸如[att=value]啦，:first-child僞類啦，:nth-of-type僞類啦，當然這個看自己需要，反正文盲是沒去實作僞類，呵呵，原因很直接：采集資料提取一般用不到僞類
前邊都是廢話，Hahahha，開始正式貼代碼了，嗯，這個代碼就不再進行解釋了，如果使用過程中出現了問題，就直接在本文後留言吧，文盲老顧會努力維護這個小程式的
首先，建立一個QuerySelector方法
public void QuerySelector(string selection)
{
_result = new List<XmlNode>();
_count = 0;
string xpath = CssParser.ParseCSS(selection);
try
{
XmlNodeList xnl = _xml.SelectNodes(xpath, XMLExpand.XPathExpand);
if (xnl != null)
{
_count = xnl.Count;
for (int i = 0; i < xnl.Count; i++)
{
_result.Add(xnl[i]);
}
}
}
catch (Exception ex)
{
throw ex;
}
}
其中的核心代碼隻有兩句，第一句是将樣式轉成xpath，即CssParser.ParseCSS，第二句是使用帶有我們xpath擴充的方式選取節點，即_xml.SelectNodes(xpath,XMLExpand.XPathExpand)
為什麼使用xpath來實作樣式選擇呢，因為xml是一個序列化的文檔，且xpath中具有多種定位方式，比如節點定位、屬性定位、軸定位等等，而css選擇器定位呢，基本上就隻使用了節點定位，屬性定位（類選擇器和ID選擇器都是屬性定位），僞類裡才會用到軸定位，比如:first-child，那麼，用xpath來實作樣式選擇器就變得可行了
現在繼續，把css轉xpath的過程按照上邊我們分析的過程一步一步實作，首先是按逗号切分
public static string ParseCSS(string selection)
{
string result = string.Empty;
// 切分逗号，每個逗号為一個單獨的選擇器，多個選擇之間為或的關系
string[] csses = selection.Split(new string[] { "," }, StringSplitOptions.None);
for (int i = 0; i < csses.Length; i++)
{
result += (string.IsNullOrEmpty(result) ? "" : "|") + ParseCssLevel(csses[i].Trim());
}
return result;
}
再然後，按照繼承（層級）方式切分
private static string ParseCssLevel(string css)
{
string result = string.Empty;
#region
// 切分樣式，用來分辨選擇器類型：繼承，子，相鄰，通用
// 空格為繼承，可跳躍節點
// > 為子，不可跳躍節點
// + 為相鄰，為同級節點的下一個兄弟節點
// ~ 為通用，為同級節點的所有後邊的兄弟節點
#endregion
MatchCollection mc = Regex.Matches(css, @"([~>\+\s]*)([^\s~>\+]+)", RegexOptions.IgnoreCase);
for (int i = 0; i < mc.Count; i++)
{
string tp = mc[i].Groups[1].Value.Trim();
string cssparser = ParseCssClass(mc[i].Groups[2].Value.Trim());
//string pre = new Regex(@"(?<=/)([^/]+$)", RegexOptions.IgnoreCase).Match(xpath).Value;
switch (tp)
{
case "":
// 繼承 CSS1.0
result += (string.IsNullOrEmpty(result) ? "" : "//") + cssparser;
break;
case "~":
// 通用 CSS3.0
// "preceding-sibling::[$pre]"
result = Regex.Replace(result, @"(?<!/)[/]+([^/]+)$", (Regex.IsMatch(cssparser, @"[\]]$") ? Regex.Replace(cssparser, @"[\]]$", " and preceding-sibling::$1]", RegexOptions.IgnoreCase) : cssparser + "[preceding-sibling::$1]"), RegexOptions.IgnoreCase);
break;
case ">":
// 子 CSS2.0
result += (string.IsNullOrEmpty(result) ? "" : "/") + cssparser;
break;
case "+":
// 相鄰 CSS2.0
// "count(preceding-sibling::[$pre]/preceding-sibling::*)+1=count(self::node()/preceding-sibling::*)"
result = Regex.Replace(result, @"(?<!/)[/]+([^/]+)$", (Regex.IsMatch(cssparser, @"[\]]$") ? Regex.Replace(cssparser, @"(?=[\]]$)", " and count(preceding-sibling::$1/preceding-sibling::*)+1=count(self::node()/preceding-sibling::*)") : "[count(preceding-sibling::$1/preceding-sibling::*)+1=count(self::node()/preceding-sibling::*)]"), RegexOptions.IgnoreCase);
break;
default:
throw new Exception("未知的選擇器類型");
}
}
return result;
}
最後，實作樣式選擇器最終定位
private static string ParseCssClass(string css)
{
// 僞類除contains外不進行解析，基本用不到
// 對多值進行比對，推薦使用*=運算，可直接指定為正規表達式
if (css == "*")
{
return "//*";
}
string result = "//*[";
// 切分獨立樣式選擇器
MatchCollection mc = Regex.Matches(css, @"([\.#])?([\w\*]+)((\[[^\[\]]+\]|[^\.#])*)", RegexOptions.IgnoreCase);
for (int i = 0; i < mc.Count; i++)
{
if (i > 0)
{
result += " and ";
}
string c = mc[i].Groups[1].Value.Trim();
string n = mc[i].Groups[2].Value;
string p = mc[i].Groups[3].Value;
if (n != "*")
{
switch (c)
{
case "":
result += "name()='" + n + "'";
break;
case ".":
result += "regex:ismatch('@class','(?<!\\w)" + n + "(?!\\w)')";//contains(@class,'" + n + "') and
break;
case "#":
result += "@id='" + n + "'";
break;
}
}
if (!string.IsNullOrEmpty(p))
{
if (n != "*")
{
result += " and ";
}
MatchCollection condition = Regex.Matches(p, @"(?<=\[)[^\[\]]+(?=\])|(?<=(:)([^:\(]+)\()[^\(\)]+(?=\))", RegexOptions.IgnoreCase);
for (int j = 0; j < condition.Count; j++)
{
if (j > 0)
{
result += " and ";
}
if (condition[j].Groups[1].Value == ":")
{
// 此處實作僞類選擇器
string cl = condition[j].Groups[2].Value;
switch (cl)
{
case "contains":
result += "regex:ismatch('.','" + condition[j].Value + "')";
break;
default:
throw new Exception("不支援的僞類選擇器");
}
}
else
{
Match m = Regex.Match(condition[j].Value, @"([^=!~\^\$\*\|]+)(?:([=!~\^\$\*\|]+)(['""]?)([^\[\]]*)\3)?", RegexOptions.IgnoreCase);
if (m.Success)
{
string att = m.Groups[1].Value;
string opr = m.Groups[2].Value;
string val = m.Groups[4].Value;
switch (opr)
{
case "":
// 包含指定屬性
result += "@" + att;
break;
case "=":
// 指定屬性完全等于指定值
result += "@" + att + "='" + val + "'";
break;
case "!=":
// 指定屬性不完全等于指定值
result += "@" + att + "!='" + val + "'";
break;
case "^=":
// 指定屬性以指定字元開頭（指定字元後可跟任意字元）
result += "regex:ismatch('@" + att + "','^" + val + "')";
break;
case "$=":
// 指定屬性以指定字元結尾（指定字元前可跟任意字元）
result += "regex:ismatch('@" + att + "','" + val + "$')";
break;
case "*=":
// 指定屬性中任意位置包含指定的字元串
result += "regex:ismatch('@" + att + "','" + val + "')";
break;
case "~=":
// 指定屬性中任意單一值等于指定值
result += "regex:ismatch('@" + att + "','(?<!\\w)" + val + "(?!\\w)')";
break;
case "|=":
// 指定屬性中，以指定值開頭，後邊可跟其他值或-
result += "regex:ismatch('@" + att + "','^" + val + "(?=[\\s-]|$)')";
break;
}
}
}
}
}
}
result += "]";
return result;
}
Hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm，真累
那麼現在我們再定位元素的時候就非常簡單了，直接使用QuerySelector指令即可，因為html文檔已經在類裡加載進來了
如果有疑問，還請各位多多留言，共同進步
本文作者：文盲老顧
本文釋出時間：2018年06月30日
本文來自雲栖社群合作夥伴
CSDN，了解相關資訊可以關注csdn.net網站。
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)