iOS html标签解析解决方案

由于项目是基于b/s结构，因为在pc端上是没有客户端这概念只有浏览器，而对于web与移动端的关系，实际上还是类似于C/S结构，因此web端与web端的通信是通过发送HTML5标签来实现，常规的做法中pc端与移动端是通过数据文本、文件来通信来交流信息的而非HTML5标签。

解决方案：

为了解决通信的矛盾，一般有两个思路：（1）后台根据发送目标来匹配发送数据。（2）适配传输内容。

思路一基于现有的条件来说实现难度大，而且不大现实。而思路二，也有一定的实现难度，但较思路一要现实，因此选择思路二。

思路二的具体实现方案有两种，方案一是基于文本发送，前端收到文本信息后再封装成html5标签进行显示，而移动端直接接受显示。方案二是html5标签，web端直接显示，移动端解析显示。

项目需要，选择方案二。

Hpple

hpple，它是一个轻量级的包装框架，可以很好的解决这个问题，尤其是它支持HTML的解析，是其他XML类库所不及的地方，它是用XPath来定位和解析HTML或者XML。githut下载地址

XPath定位原理

Xpath将xml的文档结构视为一个树形结构，元素、属性、文本、注释以及处理指令都是这个树形结构上的节点，对于xml文档中元素、属性、文本、注释以及处理指令的访问实际上是按顺序遍历这棵树，使用Xpath的路径表示法，可以定位到XML文档中的一个节点或者节点集合。

在Xpath中，可以使用相关标识来定位元素以及其属性，这些标识符关键字主要有：child、self、parent、descendant、attribute等。

child为默认标识符，self表示当前节点，parent表示上一级节点。

descendant表示当前子孙节点，attribute表示当前节点的属性。

绝对路径的Xpath表示

绝对路径是从根节点到目标节点所经历的路径。

Xpath详细学习地址：http://www.w3school.com.cn/xpath/xpath_functions.asp

im模块通信常见HTML5标签样式

//--------------------纯文本----------------------------------//

//NSString *testData = @"<p>哈哈</p>";

//NSString *testData = @"<p>ha <br/></p>";

//NSString *testData = @"<p>ha ni ha hehe wo </p>";

//NSString *testData = @"<p>嘿嘿，你好</p>";

//NSString *testData = @"<p>1      1         1             1 <br/></p>";

//NSString *testData = @"<p><strong>哈哈</strong><br/></p>";

//NSString *testData = @"<p>title<span>111</span><a>222</a>333<br><i>77 7<strong>555</strong>444</i>666</p>";

//---------------------图文混合-------------------------------//

//NSString *testData = @"<p>水电费水电费<img
src=\"http://img.baidu.com/hi/jx2/j_0025.gif\">谁的故事电饭锅<img
src=\"/dynamic/upload1/image/20150729/1438130709982028464.jpg\"
title=\"1438130709982028464.jpg\" alt=\"14.jpg\">山东省</p>";

//---------------------纯文件---------------------------------//

//NSString *testData = @"<p><a class=\"file\" id=\"WU_FILE_0\" href=\"20_205553.png\"
name=\"68477\" target=\"_blank\">2015-07-20_205553.png<span class=\"blockspan progress\" style=\"display: none;\"><span class=\"blockspan progress-bar\" style=\"width: 100%;\">0%</span></span></a></p><p><br></p>";

引入TFHpple第三方库效果

集成TFHpple库后，只需要调用以下三行代码，即可完成html5标签的解析。

NSData*data = [testData
dataUsingEncoding:NSUTF8StringEncoding];

TFHpple *xpathParser = [[TFHpplealloc]initWithHTMLData:data];

NSArray *elements = [xpathParser
searchWithXPathQuery:@"//p"];

在对纯文本标签的测试，基本都通过，无任何错误。知道解析<p>title<span>111</span><a>222</a>333<br><i>77 7<strong>555</strong>444</i>666</p>

最后得到@[@“666”,@“111”,@“222”,@“555”,@“444”]的结果。

与目标结果@[@“title”,@“111”,@“222”,@“333”,@“444”,@“555”,@“666”]的结果相差甚远。

根据程序实现逻辑可以将标签转成哈夫曼树如下图：



从图可以容易得出，因为每个节点只允许存储一个数值，因此，后面的数值会覆盖之前存储好的数值。

因此TFHpple库未能满足项目的要求。

针对TFHpple库进行优化

针对上述的情况，为了实现不会有数据的丢失，修改TFHpple库的实现逻辑，将数据结构改成NSArray，将所有的数值按照数组的值存储起来。

经过修改的TFHpple库解析后的哈夫曼树图如下：



之时，TFHpple解析出来的结果包含了所有的参数，但是顺序确是换乱。因为Xpath对标签是按照顺序来解析的，而换了NSArray后，存储的顺序规律已经被破坏，因此需要从新为每个数据编定绝对位置。

通过给每个写入结果的参数都添加上［i］，其中i表示写入的顺序。当获得结果后，再经过一个排序即可获得最终结果。

但是，由于还有属性参数已经因为文件、图片类型的标签的存在，因此需要在TFHpple的实现中添加一定的限制条件，只允许文本、img－url、file－href三种关键数据的写入。

因此添加的绝对标签在最重的结果是不完整的，所以要将原本的绝对标签视为相对标签，再将其再转换成绝对标签，最后根据标签顺序整合文本、图片、文件结果。

结果

最终实现了文本、图片、文件三种类型的单独或者混合形式的标签的解析。
优化后的TFHpple库githut地址