JS与OC交互之TFHpple

问题与思考：在项目中需要获取h5页面中图片的url，方便将url取出在分享界面使用。要完成这个目标，就要涉及到解析html。下面我会从三个方面来完成这个需求。

---

基本配置

将“TFHpple”拖入工程

引入静态库文件

添加Header Search Paths

思路
TFHpple.h中有这样一个方法：

- (id) initWithData:(NSData *)theData isXML:(BOOL)isDataXML{ return [self initWithData:theData encoding:nil isXML:isDataXML];}

这里需要我们传入一个data类型，如何获得这样一个数据

NSURL * url = [NSURL URLWithString:@"http://api.967111.com/meeting/stateDetail.do?stateId=321&schoolId=2522"] ;
NSURLRequest * request = [NSURLRequest requestWithURL:url] ;
NSData * htmlData = [NSData dataWithContentsOfURL:url] ;
TFHpple * htmls = [[TFHpple alloc]initWithData:htmlData isXML:YES] ;

利用请求头获得htmlData，将他转换成TFHpple类型的数据，此时的HTMLData中就已经包含网页中所有的数据了。

使用
我们要解析的网址是： http://api.967111.com/meeting/stateDetail.do?stateId=321&schoolId=2522 ，在Google Chrome中打开开发者工具

看到我们的目标了吗？图片的 url近在眼前，该怎么获得它嘞？
回到 TFHpple里的文档，通过遍历 htmlData中的数据

 NSArray * dataArray = [htmls searchWithXPathQuery:@"//img"] ;
 for (TFHppleElement * element in dataArray) {
 if ([[element objectForKey:@"class"]isEqualToString:@"img-rounded carousel-inner img-responsive img-rounded"]) { 
           NSLog(@" tag ==== %@",element.tagName) ;  
           NSLog(@"raw ====== %@",element.raw) ; 
           sstr = [element.attributes objectForKey:@"src"] ; 
          NSLog(@"sstr ====== %@", sstr) ;
    }
 }

这里的//img, class, img-rounded carousel-inner img-responsive img-rounded，分别对应

中的img,class,img-rounded carousel-inner img-responsive img-rounded。 img称为为 节点， class称为 节点属性 ，img-rounded carousel-inner img-responsive img-rounded 称为节点属性值，sstr 里的内容就是节点内容。打印一下看结果：

在外界定义一个值来接收这个sstr 也就是我们所需要的图片的url就可以了。

不足之处还望指正

Demo: __ https://github.com/msmsmsmsmsmsms/Demo_JS-OC-TFHpple__

以上。