使用xpath实现document.querySelector样式选择器进行html解析(一):将html转成xml

简介:

使用xpath实现document.querySelector样式选择器进行html解析(一):将html转成xml

使用xpath实现document.querySelector样式选择器进行html解析(二):扩展一下xpath以便支持正则

使用xpath实现document.querySelector样式选择器进行html解析(三):实现样式选择器

使用xpath实现document.querySelector样式选择器进行html解析(四):将选择结果封装进行输出

-----------------------------------------------------------------

文盲做采集工作也做了有些年头了,一直以来,对采集到的内容都是用正则进行数据提取的,但是使用的时间越长,越觉得使用正则很麻烦。

第一,了解正则的人在行业内真的是少数,而且复杂的业务逻辑写出来的正则,隔段时间,自己都看不懂了。。。

第二,正则对文档的格式还是有一定要求的,比如说如何提取一个完整的闭合html标签,这个正则就很复杂,用到层深计算了,如果一旦html内出现了非法内容,那就是一场灾难,正则会整个卡死。。。。。

所以,文盲老顾一直想找一个htmlparser类型的东西来代替正则,恩,比如说Winista.HtmlParser啦、HtmlAgilityPack啦

但是,这里要说一个但是,这些第三方的东西并不符合咱们的日常使用习惯,什么是日常使用习惯呢?当然是css选择器啦!不管是按id找啦,按样式找啦,还是按标签找啦,这些方式我相信大部分开发人员都能很快上手。

于是,按照这个目的触发,那么文盲老顾找到的第三方工具都需要帕斯掉了,因为他们不支持,或仅支持部分需求,恩。。。。hmmmmmmmm,也许是文盲老顾没弄明白这些东西到底怎么来实现这个css选择器方式的内容查找,总之,文盲决定自己搞一个htmlparser了

废话说到这里,下边开始编写文盲版的htmlparser

-----------------------------------------------------------------

在开始编写之前整理一下思路

首先,html是一个格式很随意的文本文档,不能强求它一定符合xhtml规范

第二,在xml中,可以通过xpath来实现诸如id、样式、文字包含等css1.0、2.0、3.0各种规范的选择器(虽然可能比较复杂,但文盲老顾在2014年的确已经实现了很多内容,css伪类没做实现,有需要的话,各位同学可以在本文后留言共同讨论)

第三,html无法直接转成xml,所以我们需要对html进行一些处理,使其能正常的转换到xml格式

最后,定义一个通用方法,来实现css选择器方式选取节点并得到想提取的信息

根据这个思路,第一步应该是先把html转成xml,好了,开始做第一步工作

-----------------------------------------------------------------

首先先定义一个类,用以加载html内容

public class HtmlObject
{
private string _html = string.Empty;
private List<string> _tags = new List<string>();
private List<string> _self = new List<string>();
private XmlDocument _xml = null;
public string Html
{
get
{
return _html;
}
}
public XmlDocument Xml
{
get
{
return _xml;
}
}
public HtmlObject()
{
InitDefine();
}
public HtmlObject(string html)
{
_html = html;
InitDefine();
InitHtml();
}
public void Load(string file)
{
LoadHtml(FileHelper.FileToString(file));
}
public void LoadHtml(string html)
{
_html = html;
InitHtml();
}
public void LoadUrl(string url)
{
Ajax ajax = new Ajax();
ajax.AppendCss = false;
ajax.AddFullPath = true;
ajax.AutoSave = false;
ajax.AutoUpdate = true;
LoadHtml(ajax.Http(url));
}
private void InitDefine()
{
// 声明自闭合标签
_self.AddRange(new string[] { "img", "br", "hr", "base", "meta", "link", "area" });
}
private void InitHtml()
{
_tags = new List<string>();
XmlDocument xml = new XmlDocument();
xml.LoadXml("<r />");
MatchCollection mc = Regex.Matches(_html, @"<!(?!-)(?:[^<>'""]|(['""])[^'""]*\1)*?>|<([%\?])[\s\S]*?\2>|<!--[\s\S]*?-->|<(script|style)(?!\w)[^<>]*?>(?:[^'""]|(['""])[^'""]*\4)*?</\3(?!\w)[^<>]*?>|<(?![!%\?])(?:[^<>'""]|(['""])[^'""]*\5)*?>|[^<]+(?=<|$)", RegexOptions.IgnoreCase);
XmlNode node = xml.DocumentElement;
for (int i = 0; i < mc.Count; i++)
{
ParseNode(ref node, mc[i].Value);
}
_xml = xml;
}
private void ParseNode(ref XmlNode node, string value)
{
// 如果是标签
if (Regex.IsMatch(value, @"^<"))
{
XmlNode xn = null;
string name = string.Empty;
//如果是样式或脚本
if (Regex.IsMatch(value, @"^<(script|style)(?!\w)", RegexOptions.IgnoreCase))
{
xn = XMLExpand.AppendNode(node, Regex.Match(value, @"(?<=^<)(style|script)", RegexOptions.IgnoreCase).Value.ToLower());
xn.AppendChild(xn.OwnerDocument.CreateCDataSection(Regex.Match(value, @"(?<=^<(style|script)[^<>]*?>)[\s\S]*?(?=</\1[^<>]*?>$)", RegexOptions.IgnoreCase).Value));
}
// 注释或其他程序语言标签
if (Regex.IsMatch(value, @"^<[!%\?]"))
{
node.AppendChild(node.OwnerDocument.CreateCDataSection(value));
//XMLExpand.AppendNode(node, "REM").InnerText = value;
}
// 正常标签
if (Regex.IsMatch(value, @"^<(?!(script|style))\w+"))
{
name = Regex.Match(value, @"(?<=^<)\w+", RegexOptions.IgnoreCase).Value.ToLower();
// 如果不是自闭合标签则将当前增加的标签放入到待闭合标签中
if (!Regex.IsMatch(value, @"/>$") && !_self.Contains(name))
{
_tags.Add(name);
}
xn = XMLExpand.AppendNode(node, name);
node = xn;
}
// 正常标签结束
if (Regex.IsMatch(value, @"^</"))
{
name = Regex.Match(value, @"(?<=^</)\w+", RegexOptions.IgnoreCase).Value.ToLower();
if (node.Name == name)
{
_tags.RemoveAt(_tags.Count - 1);
node = node.ParentNode;
}
else
{
// 如果待闭合标签中包含对应标签则关闭对应标签,否则忽视
if (_tags.Contains(name))
{
for (int i = _tags.Count; i > 0; i--)
{
if (_tags[i - 1] == name)
{
_tags.RemoveRange(i - 1, _tags.Count - i + 1);
break;
}
}
while (node.Name != name)
{
node = node.ParentNode;
}
}
}
}
if (Regex.IsMatch(value, @"^<(?![/!%\?])") && xn != null)
{
Match m = Regex.Match(value, @"^<[^<>]*?>", RegexOptions.IgnoreCase);
ParseAttribute(xn, m);
}
// 如果是自闭合标签
if (xn != null && xn == node && !string.IsNullOrEmpty(name) && (Regex.IsMatch(value, @"/>$") || _self.Contains(name)))
{
node = node.ParentNode;
}
}
else
{
// 纯文本,将文本内容作为节点文本内容
node.AppendChild(node.OwnerDocument.CreateCDataSection(value));
//XMLExpand.AppendNode(node, "TEXT").InnerText = value;
}
}
private void ParseAttribute(XmlNode node, Match match)
{
            string html = match.Value;
            MatchCollection mc = Regex.Matches(html, @"(?<=[\r\n\s\t])(\w+)[\r\n\s\t]*=[\r\n\s\t]*((['""])([^'""]*)\3|[^\s\r\t\n>]+)", RegexOptions.IgnoreCase);
            for (int i = 0; i < mc.Count; i++)
            {
                XMLExpand.SetAttribute(node, mc[i].Groups[1].Value.ToLower(), string.IsNullOrEmpty(mc[i].Groups[4].Value) ? (Regex.IsMatch(mc[i].Groups[2].Value, @"^(['""])\1$") ? "" : mc[i].Groups[2].Value) : mc[i].Groups[4].Value);
            }
        }
}

恩。。。。。。反正就是这么个代码,呵呵

构造函数有两个,一个是带html文本的,一个是不带的

加载文档则有三个方法,一个是直接加载html文本的LoadHtml方法,一个是加载本地文件的Load方法,一个是加载网址获得文档LoadUrl,Hmmmmmmmm,LoadUrl就忽略好了,Load方法也忽略好了。。。。我的代码中用到的类可以自己去实现后替换,反正意思一样。。。。

在这个类中,我声明了两个私有数组,_tags和_self,_tags是用来存储解析过程中,未闭合的标签,而_self则保存无需闭合的标签枚举

然后,就是InitHtml这个核心方法了。。。。。

对html文档,我使用正则将其切分成一个数组,这个正则大家也可以帮我看看有没有需要调整的地方


<!(?!-)(?:[^<>'""]|(['""])[^'""]*\1)*?>
|
<([%\?])[\s\S]*?\2>
|
<!--[\s\S]*?-->
|
<(script|style)(?!\w)[^<>]*?>(?:[^'""]|(['""])[^'""]*\4)*?</\3(?!\w)[^<>]*?>
|
<(?![!%\?])(?:[^<>'""]|(['""])[^'""]*\5)*?>
|
[^<]+(?=<|$)

我是这么想的,html中显示的文本是在标签之外的,恩,用最后一个正则片段实现,也就是[^<]+(?=<|$)部分

然后是正常的标签部分,不管是结束标签还是闭合标签还是其他什么html不识别的标签,只要是标签格式,我都拿出来当标签处理,恩,用倒数第二个正则片段实现,也就是<(?![!%\?])(?:[^<>'""]|(['""])[^'""]*\5)*?>部分

但是,在实际使用过程中,有些标签中会包含一些特定文本,比如样式、比如脚本,那么把样式和脚本作为特定标签处理,于是产生了倒数第三个正则片段。。。恩,主要是为了在脚本片段中允许出现小于号,还有</script>这样的常量,所以这个正则稍微麻烦了些

再然后,发现还有注释内容也很蛋疼。。。。例如<!--这里是包含标签的注释内容<a href="">链接</a>-->。。。。没办法,继续加特例。。。。于是倒数第四个正则片段也出现了。。。。。

哦,写到这里,发现还会可能出现其他脚本语言片段。。。例如<% %>啦,例如<? ?>啦。。。得,再来搞个正则用来把它也摘出来

最后。。。。还有html声明。。。。也就是<!doctype html>这样的html代码片段也得特殊声明下。。。。。。好了,第一步我们完成了。。。。。把html用正则拆开了。。。。

MatchCollection mc = Regex.Matches(_html, @"<!(?!-)(?:[^<>'""]|(['""])[^'""]*\1)*?>|<([%\?])[\s\S]*?\2>|<!--[\s\S]*?-->|<(script|style)(?!\w)[^<>]*?>(?:[^'""]|(['""])[^'""]*\4)*?</\3(?!\w)[^<>]*?>|<(?![!%\?])(?:[^<>'""]|(['""])[^'""]*\5)*?>|[^<]+(?=<|$)", RegexOptions.IgnoreCase);

说真的,如果这个正则还有其他文盲没有考虑到的情况,请在本文后留言,文盲会尽快测试,或者,同学们要是发现使用这个正则拆分html的时候出现内容丢失或者拆分结果不符合预期的时候,也请留言,并将html片段贴出来

恩。。。。。。第一步完成了,就继续下一步,解析节点。。。,也就是ParseNode方法了

解析节点的思路也比较简单,如果是文本,则扔个CDataSection节点到xml里,如果是标签,则按照标签格式扔不同的节点到xml里,如果是非闭合标签,则当前标签修正为新增标签,如果是闭合标签,则当前标签修正为对应的开始标签的父级,如果新增了标签,顺便把新增标签的属性也解析一下,恩,也就是ParseAttribute

不知道会不会有其他异常,也请大家帮忙测试

好了,第一阶段完成,可以把Html转成xml了,实现选择的的内容,我们下次再说

本文作者:文盲老顾
本文发布时间:2018年06月29日
本文来自云栖社区合作伙伴 CSDN,了解相关信息可以关注csdn.net网站。
目录
相关文章
|
26天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
2月前
|
JavaScript 前端开发 数据可视化
html解析过程
html解析过程【2月更文挑战第26天】
23 6
|
2月前
|
XML 前端开发 数据格式
请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
【2月更文挑战第22天】【2月更文挑战第67篇】请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
|
25天前
|
XML 存储 JavaScript
html和xml
【4月更文挑战第10天】html和xml
15 1
|
4天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
7天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
16天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
13 2
|
26天前
几个比较冷门的prototype扩展方法:去掉html标签、去掉a标签、去掉style样式,以及判断是否为html代码的代码片段
几个比较冷门的prototype扩展方法:去掉html标签、去掉a标签、去掉style样式,以及判断是否为html代码的代码片段
|
28天前
|
前端开发 JavaScript
HTML深度解析:更改文本颜色
【4月更文挑战第1天】
43 0
HTML深度解析:更改文本颜色

推荐镜像

更多