使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml

2024-02-25 20:48
文章标签 进行 xml 实现 使用 html 解析 frontend 样式 选择器 转成 xpath document queryselector

本文主要是介绍使用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了，实现选择的的内容，我们下次再说

这篇关于使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/746661。

相关文章

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,：本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖？1.2 核心危害二、Spring的三级缓存机制2.1 三
阅读更多...
pytorch自动求梯度autograd的实现

pytorch自动求梯度autograd的实现

《pytorch自动求梯度autograd的实现》autograd是一个自动微分引擎,它可以自动计算张量的梯度,本文主要介绍了pytorch自动求梯度autograd的实现,具有一定的参考价值,感兴趣... autograd是pytorch构建神经网络的核心。在 PyTorch 中，结合以下代码例子，当你
阅读更多...
C#中async await异步关键字用法和异步的底层原理全解析

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》：本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程
阅读更多...
使用Python构建一个Hexo博客发布工具

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加
阅读更多...
SpringBoot集成Milvus实现数据增删改查功能

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
shell编程之函数与数组的使用详解

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》：本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Python虚拟环境终极(含PyCharm的使用教程)

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》：本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境？二、虚拟环境创建方式对比三、命令行创建虚拟环境（venv）3.1 基础命令3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2