iOS抓取HTML ,CSS XPath解析数据

简介:

以前我们获取数据的方式都是使用 AFN 来 Get JSON 数据,比如 点我查看 JSON 数据.http://news-at.zhihu.com/api/4/news/latest

但例如下面的百度贴吧,和豆瓣读书等网站...并不提供我们获取数据的 API

百度贴吧:  

百度贴吧数据

百度贴吧数据.png

豆瓣读书:

豆瓣读书数据

豆瓣读书数据.png

这时我们可以解析他们的 HTML 来获取我们想要的数据.

工具准备

这时我们需要2个工具,Firefox 和FireBug.

你可以在 http://www.firefox.com.cn/download/下载 FireFox 浏览器,然后在其右上角菜单的附加组件管理器中下载 FireBug 插件.

FireBug 有很强大的 JavaScript 调试功能,还能实时编辑 HTML CSS,是前端同学喜爱的一个工具.

下载安装好以后 点击右上角的 Bug(虫子)图标来使用 FireBug 调试当前网页.

如果你不了解 XPath ,可以学习 w3school 的教程.

打开 FireBug

打开 FireBug.png

Ono 开源库

Ono 是一个 Github 上的开源项目,它能方便我们解析 XML,HTML 标签,并且支持 CSS XPath 搜索特定节点.

你可能没听过这个库,但其作者你肯定知道. Mattt Thompson,它是 AFN 的作者,还是博客 NSHipster 的作者.

Swift 版本类似的开源库 Ji

Java 或 Android 可以使用 Jsoup

开始

准备工作都 Ok 了..我们开始编码.新建一个空白工程,注意,如果要在 Info.plist 中添加两行 App Transport Security Settings,和 Allow Arbitrary Loads YES, 来允许 HTTP 传输.  

App 允许 Http

App 允许 Http.png

然后使用 CocoaPods 添加第三方库 pod 'Ono'.

这里,要解析的 HTMl 数据就用我的博客了

再创建一个 Post 类继承自 NSObject,代表每一篇文章 ,修改 .h 文件如下

 
 
  1. #import 
  2.  
  3. @class ONOXMLElement; 
  4.  
  5.   
  6.  
  7. @interface Post : NSObject 
  8.  
  9. @property (copy,nonatomic) NSString *title; //文章标题 
  10.  
  11. @property (copy,nonatomic) NSString *postDate; //文章发表时间 
  12.  
  13. @property (copy,nonatomic) NSString *postUrl; //文章正文内容的 Url 
  14.  
  15.   
  16.  
  17. +(NSArray*)getNewPosts; //获取所有文章 
  18.  
  19. +(instancetype)postWithHtmlStr:(ONOXMLElement*)element; //用 HTMl 数据创建 Post 类 
  20.  
  21. @end  

在.m 文件中导入 Ono,并添加一个常量 Url.

 
 
  1. #import      
  2.  
  3. static NSString *const kUrlStr=@"http://BigPi.me" 

然后我们可以用 AFN 等下载该 Url 的 HTML数据,再使用 XPath 获取代表每一篇文章的 XPath,

先打开 FireFox 和 FireBug ,点击下面的图

FireBug 元素选择器

FireBug 元素选择器.png

在适当移动鼠标,点击选择网页上的一篇文章,

Post数据

Post数据.png

这时我们可以看到,下面 FireBug 的 HTMl 树展开了,我们可以发现,每一个

标签都包含一篇文章的数据.

我们右键

,复制其 XPath

复制 XPath

复制 XPath.png

复制出来的结果 //*[@id="posts"],这个

节点下面的每一个子节点都代表一篇文章,

我们现在来使用这个 XPath 获取所有的 HTML 数据.在 Post.m 添加如下方法:

 
 
  1. +(NSArray*)getNewPosts{ 
  2.  
  3.     NSMutableArray *array=[NSMutableArray array]; 
  4.  
  5.     NSData *data= [NSData dataWithContentsOfURL:[NSURL URLWithString:kUrlStr]]; //下载网页数据 
  6.  
  7.   
  8.  
  9.     NSError *error; 
  10.  
  11.     ONOXMLDocument *doc=[ONOXMLDocument HTMLDocumentWithData:data error:&error]; 
  12.  
  13.     ONOXMLElement *postsParentElement= [doc firstChildWithXPath:@"//*[@id='posts']"]; //寻找该 XPath 代表的 HTML 节点, 
  14.  
  15.     //遍历其子节点, 
  16.  
  17.     [postsParentElement.children enumerateObjectsUsingBlock:^(ONOXMLElement *element, NSUInteger idx, BOOL * _Nonnull stop) { 
  18.  
  19.         NSLog(@"%@",element); 
  20.  
  21.     }]; 
  22.  
  23.     return array; 
  24.  
  25.  

并在ViewController.m 中调用这个方法:

 
 
  1. @implementation ViewController 
  2.  
  3.   
  4.  
  5. - (void)viewDidLoad { 
  6.  
  7.     [super viewDidLoad]; 
  8.  
  9.     [Post getNewPosts]; 
  10.  
  11.  
  12.   
  13.  
  14. @end  

运行后查看 Console, 我们已经可以获取到每篇文章的 HTMl 了,然后我们再来解析每篇文章的具体数据.

切换到 FireBug,展开其中一篇文章的节点  

文章 HTML 节点.png

我们可以看到<h2 class="title">节点下的

  • <a href="/post/jazzhands/jazzhands-yuan-ma-shi-xian-fen-xi">
  • <i class="fa fa-leaf"></i>
  • JazzHands 源码实现分析</a>

标签中,有文章的具体Url, 和文章标题,

<div class="info">节点下的,

  • <span class="date">
  • <i class="fa fa-clock-o"></i>
  • 2016-03-04 21:39</span>

标签有文章发布的时间,此时我们可以右键点击节点,复制文章标题,发布时间等节点的 XPath,

但这里我们使用相对的 XPath.

每篇文章的 HTML 结构如下:

  • 文章标题 Url等内容

所以我们的

  • 文章 Url XPath : “h2/a”
  • 文章标题 XPath : a 标签的 href 属性值
  • 文章发布时间 XPath : “div[2]/span[1]”

接下来我们来解析每一篇文章的详细数据

在 Post.m 中添加方法:

 
 
  1. +(instancetype)postWithHtmlStr:(ONOXMLElement*)element{ 
  2.  
  3.   
  4.  
  5.     Post *p=[Post new]; 
  6.  
  7.     ONOXMLElement *titleElement= [element firstChildWithXPath:@"h2/a"]; // 根据 XPath 获取含有文章标题的 a 标签 
  8.  
  9.     p.postUrl= [titleElement valueForAttribute:@"href"]; //获取 a 标签的  href 属性 
  10.  
  11.     p.title= [titleElement stringValue]; 
  12.  
  13.     ONOXMLElement *dateElement= [element firstChildWithXPath:@"div[2]/span[1]"]; //根据 XPath 获取文章发布时间 span 标签 
  14.  
  15.     p.postDate= [dateElement stringValue]; 
  16.  
  17.     return p; 
  18.  
  19.  

然后修改 +(NSArray*)getNewPosts方法:如下

 
 
  1. ... 
  2.  
  3. [postsParentElement.children enumerateObjectsUsingBlock:^(ONOXMLElement *element, NSUInteger idx, BOOL * _Nonnull stop) { 
  4.  
  5.         //NSLog(@"%@",element); 
  6.  
  7.         Post *post=[Post postWithHtmlStr:element]; 
  8.  
  9.         if(post){ 
  10.  
  11.             [array addObject:post]; 
  12.  
  13.         } 
  14.  
  15.     }]; 
  16.  
  17. ...  

最后因为我们我们获取到的 HTMl 的文章 Url 是相对 Url, 类似

/post/jazzhands/jazzhands-yuan-ma-shi-xian-fen-xi

所以我们在 Setter 方法中拼接域名 , http://BigPi.me

 
 
  1. -(void)setPostUrl:(NSString *)postUrl{ 
  2.  
  3.     _postUrl=[kUrlStr stringByAppendingString:postUrl]; 
  4.  
  5.  

我们在下图位置打断点查看结果:

代码断点

 代码断点.png

运行起来,结果如下:

抓取文章数据结果

抓取文章数据结果.png

至此我们已经能使用 FireBug + Ono + XPath 来解析 HTML 数据

我就使用这个办法获取我们学校教务管理系统 HTML,制作了一个统计成绩,计算绩点的 App.

补充

  • FireBug 是一个很强大前端调试工具.
  • 还可以使用 正则表达式 来解析 HTML 数据.不过从 StackOverflow 讨论 来看 ,并推荐使用正则来解析 HTML 数据.
  • RayWonderLich 有一篇比较老的教程 ,使用类似的技术解析 HTML
  • 最最后,很重要的一点,HTML 数据可能经常会变动,尤其那个网页还不是我们自己能管理的网页,所以 XPath 随时可能解析失败,
  • 如果你一定要使用 XPath 来解析 HTML 数据,可以在服务端进行这个操作,然后修改成 API 的形式,让手机端像以前一样 GET JSON 数据.
  • 同时,服务端还可以设置异常处理,缓存等策略.



本文作者:佚名
来源:51CTO
目录
相关文章
|
1天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
2天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
24 5
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
6天前
|
JSON Go 数据格式
【golang】json数据解析 - 嵌套json解析
【golang】json数据解析 - 嵌套json解析
8 0
|
6天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
12 1
|
6天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
7天前
|
XML 数据格式 Python
Python使用xpath对解析内容进行数据提取
在前面的文章当中,已经教大家如何去获取我们需要的数据原文内容,今天就介绍一个用于提取所需数据的方法之一xpath。在后续会讲解bs4(beautifulsoup),re正则表达式。
|
8天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
18 0
|
8天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
15 0

推荐镜像

更多