iOS抓取HTML ,CSS XPath解析數(shù)據(jù)
以前我們獲取數(shù)據(jù)的方式都是使用 AFN 來 Get JSON 數(shù)據(jù),比如 點我查看 JSON 數(shù)據(jù).http://news-at.zhihu.com/api/4/news/latest
但例如下面的百度貼吧,和豆瓣讀書等網(wǎng)站...并不提供我們獲取數(shù)據(jù)的 API
百度貼吧:
百度貼吧數(shù)據(jù).png
豆瓣讀書:
豆瓣讀書數(shù)據(jù).png
這時我們可以解析他們的 HTML 來獲取我們想要的數(shù)據(jù).
工具準備
這時我們需要2個工具,Firefox 和FireBug.
你可以在 http://www.firefox.com.cn/download/下載 FireFox 瀏覽器,然后在其右上角菜單的附加組件管理器中下載 FireBug 插件.
FireBug 有很強大的 JavaScript 調(diào)試功能,還能實時編輯 HTML CSS,是前端同學喜愛的一個工具.
下載安裝好以后 點擊右上角的 Bug(蟲子)圖標來使用 FireBug 調(diào)試當前網(wǎng)頁.
如果你不了解 XPath ,可以學習 w3school 的教程.
打開 FireBug.png
Ono 開源庫
Ono 是一個 Github 上的開源項目,它能方便我們解析 XML,HTML 標簽,并且支持 CSS XPath 搜索特定節(jié)點.
你可能沒聽過這個庫,但其作者你肯定知道. Mattt Thompson,它是 AFN 的作者,還是博客 NSHipster 的作者.
Swift 版本類似的開源庫 Ji
Java 或 Android 可以使用 Jsoup
開始
準備工作都 Ok 了..我們開始編碼.新建一個空白工程,注意,如果要在 Info.plist 中添加兩行 App Transport Security Settings,和 Allow Arbitrary Loads YES, 來允許 HTTP 傳輸.
App 允許 Http.png
然后使用 CocoaPods 添加第三方庫 pod 'Ono'.
這里,要解析的 HTMl 數(shù)據(jù)就用我的博客了
再創(chuàng)建一個 Post 類繼承自 NSObject,代表每一篇文章 ,修改 .h 文件如下
- #import
- @class ONOXMLElement;
- @interface Post : NSObject
- @property (copy,nonatomic) NSString *title; //文章標題
- @property (copy,nonatomic) NSString *postDate; //文章發(fā)表時間
- @property (copy,nonatomic) NSString *postUrl; //文章正文內(nèi)容的 Url
- +(NSArray*)getNewPosts; //獲取所有文章
- +(instancetype)postWithHtmlStr:(ONOXMLElement*)element; //用 HTMl 數(shù)據(jù)創(chuàng)建 Post 類
- @end
在.m 文件中導入 Ono,并添加一個常量 Url.
- #import
- static NSString *const kUrlStr=@"http://BigPi.me";
然后我們可以用 AFN 等下載該 Url 的 HTML數(shù)據(jù),再使用 XPath 獲取代表每一篇文章的 XPath,
先打開 FireFox 和 FireBug ,點擊下面的圖
FireBug 元素選擇器.png
在適當移動鼠標,點擊選擇網(wǎng)頁上的一篇文章,
Post數(shù)據(jù).png
這時我們可以看到,下面 FireBug 的 HTMl 樹展開了,我們可以發(fā)現(xiàn),每一個
標簽都包含一篇文章的數(shù)據(jù).
我們右鍵
,復制其 XPath
復制 XPath.png
復制出來的結(jié)果 //*[@id="posts"],這個
節(jié)點下面的每一個子節(jié)點都代表一篇文章,
我們現(xiàn)在來使用這個 XPath 獲取所有的 HTML 數(shù)據(jù).在 Post.m 添加如下方法:
- +(NSArray*)getNewPosts{
- NSMutableArray *array=[NSMutableArray array];
- NSData *data= [NSData dataWithContentsOfURL:[NSURL URLWithString:kUrlStr]]; //下載網(wǎng)頁數(shù)據(jù)
- NSError *error;
- ONOXMLDocument *doc=[ONOXMLDocument HTMLDocumentWithData:data error:&error];
- ONOXMLElement *postsParentElement= [doc firstChildWithXPath:@"//*[@id='posts']"]; //尋找該 XPath 代表的 HTML 節(jié)點,
- //遍歷其子節(jié)點,
- [postsParentElement.children enumerateObjectsUsingBlock:^(ONOXMLElement *element, NSUInteger idx, BOOL * _Nonnull stop) {
- NSLog(@"%@",element);
- }];
- return array;
- }
并在ViewController.m 中調(diào)用這個方法:
- @implementation ViewController
- - (void)viewDidLoad {
- [super viewDidLoad];
- [Post getNewPosts];
- }
- @end
運行后查看 Console, 我們已經(jīng)可以獲取到每篇文章的 HTMl 了,然后我們再來解析每篇文章的具體數(shù)據(jù).
切換到 FireBug,展開其中一篇文章的節(jié)點
文章 HTML 節(jié)點.png
我們可以看到<h2 class="title">節(jié)點下的
- <a href="/post/jazzhands/jazzhands-yuan-ma-shi-xian-fen-xi">
- <i class="fa fa-leaf"></i>
- JazzHands 源碼實現(xiàn)分析</a>
標簽中,有文章的具體Url, 和文章標題,
<div class="info">節(jié)點下的,
- <span class="date">
- <i class="fa fa-clock-o"></i>
- 2016-03-04 21:39</span>
標簽有文章發(fā)布的時間,此時我們可以右鍵點擊節(jié)點,復制文章標題,發(fā)布時間等節(jié)點的 XPath,
但這里我們使用相對的 XPath.
每篇文章的 HTML 結(jié)構(gòu)如下:
- 文章標題 Url等內(nèi)容
所以我們的
- 文章 Url XPath : “h2/a”
- 文章標題 XPath : a 標簽的 href 屬性值
- 文章發(fā)布時間 XPath : “div[2]/span[1]”
接下來我們來解析每一篇文章的詳細數(shù)據(jù)
在 Post.m 中添加方法:
- +(instancetype)postWithHtmlStr:(ONOXMLElement*)element{
- Post *p=[Post new];
- ONOXMLElement *titleElement= [element firstChildWithXPath:@"h2/a"]; // 根據(jù) XPath 獲取含有文章標題的 a 標簽
- p.postUrl= [titleElement valueForAttribute:@"href"]; //獲取 a 標簽的 href 屬性
- p.title= [titleElement stringValue];
- ONOXMLElement *dateElement= [element firstChildWithXPath:@"div[2]/span[1]"]; //根據(jù) XPath 獲取文章發(fā)布時間 span 標簽
- p.postDate= [dateElement stringValue];
- return p;
- }
然后修改 +(NSArray*)getNewPosts方法:如下
- ...
- [postsParentElement.children enumerateObjectsUsingBlock:^(ONOXMLElement *element, NSUInteger idx, BOOL * _Nonnull stop) {
- //NSLog(@"%@",element);
- Post *post=[Post postWithHtmlStr:element];
- if(post){
- [array addObject:post];
- }
- }];
- ...
最后因為我們我們獲取到的 HTMl 的文章 Url 是相對 Url, 類似
/post/jazzhands/jazzhands-yuan-ma-shi-xian-fen-xi
所以我們在 Setter 方法中拼接域名 , http://BigPi.me
- -(void)setPostUrl:(NSString *)postUrl{
- _postUrl=[kUrlStr stringByAppendingString:postUrl];
- }
我們在下圖位置打斷點查看結(jié)果:
代碼斷點.png
運行起來,結(jié)果如下:
抓取文章數(shù)據(jù)結(jié)果.png
至此我們已經(jīng)能使用 FireBug + Ono + XPath 來解析 HTML 數(shù)據(jù)
我就使用這個辦法獲取我們學校教務管理系統(tǒng) HTML,制作了一個統(tǒng)計成績,計算績點的 App.
補充
- FireBug 是一個很強大前端調(diào)試工具.
- 還可以使用 正則表達式 來解析 HTML 數(shù)據(jù).不過從 StackOverflow 討論 來看 ,并推薦使用正則來解析 HTML 數(shù)據(jù).
- RayWonderLich 有一篇比較老的教程 ,使用類似的技術(shù)解析 HTML
- 最最后,很重要的一點,HTML 數(shù)據(jù)可能經(jīng)常會變動,尤其那個網(wǎng)頁還不是我們自己能管理的網(wǎng)頁,所以 XPath 隨時可能解析失敗,
- 如果你一定要使用 XPath 來解析 HTML 數(shù)據(jù),可以在服務端進行這個操作,然后修改成 API 的形式,讓手機端像以前一樣 GET JSON 數(shù)據(jù).
- 同時,服務端還可以設置異常處理,緩存等策略.
本文 Demo 可以在 https://github.com/iShawnWang/BlogDemo/tree/master/ParseHTMLDemo中獲取
