使用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片段上来，然后不要着急向后看，先自己看看能得到什么结果，再和文盲老顾的答案对照一下，看看你的基础知识是否掌握的很牢固，嘿嘿
<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>
-----------------------------------------------------------------
<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中间没有空格哦，这个也是在解析时需要处理的地方
经过两次切分了，现在的选择器有哪些了呢
#main
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;
// 切分样式，用来分辨选择器类型：继承，子，相邻，通用
// 空格为继承，可跳跃节点
// > 为子，不可跳跃节点
// + 为相邻，为同级节点的下一个兄弟节点
// ~ 为通用，为同级节点的所有后边的兄弟节点
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网站。
