iOS中HTML的解析——Hpple

前言

iOS中，当我们需要解析xml或html时，我们可以使用libxml2来进行解析。但由于libxml2的api设计比较繁琐，使用起来并不方便。Hpple则是基于libxml2的oc库，使
我们可以用其方便地进行xml或html的解析。

使用方法

我们先来看看，我们需要解析的是什么样的对象。

NSString *htmlString  = @"<p style='color:blue;font-size:16px;'>Hell<font color='red'>o w</font>orld</p>";

这是一段普通的html，设置了一段文字的字体大小和颜色。我可以先看展示效果。

image.png

我们在解析这一段html时，希望得到的，是它的标签名，内容和属性。接下来看一下Hpple是如何帮我们完成这些的：

    NSString *htmlString  = @"<p style='color:blue;font-size:16px;'>Hell<font color='red'>o w</font>orld</p>";
    // 将html字符串转为NSData
    NSData *data = [htmlString dataUsingEncoding:NSUTF8StringEncoding];
    // 创建Hpple对象
    xpathParser = [[TFHpple alloc] initWithHTMLData:data];
    // 搜索XPath寻找标签
    NSArray *elements  = [xpathParser searchWithXPathQuery:@"//p"];
    // Output
    TFHppleElement *element = [elements objectAtIndex:0];
    NSLog(@"content：%@" , [element content]);
    NSLog(@"tagName：%@",[element tagName]);
    NSLog(@"attributes：%@",[element attributes]);    

我们搜索文本中的<p>获得如下输出：

2018-03-03 19:29:01.249456+0800 HppleDemo[8877:1175700] content：Hello world
2018-03-03 19:29:01.249579+0800 HppleDemo[8877:1175700] tagName：p
2018-03-03 19:29:01.249743+0800 HppleDemo[8877:1175700] attributes：{
    style = "color:red;font-size:16px;";
}

这些输出中，我们获得了<p>的标签名、内容和style。但我们没有获取到<font>的信息。
所幸Hpple为我们提供了hasChildren和children两个方法，我们可以以此来获得子标签的属性：

    NSString *htmlString  = @"<p style='color:blue;font-size:16px;'>Hell<font color='red'>o w</font>orld</p>";
    // 将html字符串转为NSData
    NSData *data = [htmlString dataUsingEncoding:NSUTF8StringEncoding];
    // 创建Hpple对象
    xpathParser = [[TFHpple alloc] initWithHTMLData:data];
    // 搜索XPath寻找标签
    NSArray *elements  = [xpathParser searchWithXPathQuery:@"//p"];
    // Output
    TFHppleElement *element = [elements objectAtIndex:0];
    [self logElemen:element];
    if ([element hasChildren]) {
        NSArray* children = [element children];
        for(int i = 0 ; i < [children count] ; i++){
            TFHppleElement *subElement = children[i];
            [self logElemen:subElement];
        }
    }

- (void) logElemen:(TFHppleElement*) element{
    NSLog(@"raw：%@",[element raw]);
    NSLog(@"content：%@" , [element content]);
    NSLog(@"tagName：%@",[element tagName]);
    NSLog(@"attributes：%@",[element attributes]);
}

这样修改之后，我们可以看到<p>的子标签也被一一打印了出来：

2018-03-03 20:32:27.724729+0800 HppleDemo[9647:1226741] raw：<p style="color:blue;font-size:16px;">Hell<font color="red">o w</font>orld</p>
2018-03-03 20:32:27.724873+0800 HppleDemo[9647:1226741] content：Hello world
2018-03-03 20:32:27.724982+0800 HppleDemo[9647:1226741] tagName：p
2018-03-03 20:32:27.725157+0800 HppleDemo[9647:1226741] attributes：{
    style = "color:blue;font-size:16px;";
}
2018-03-03 20:32:27.725267+0800 HppleDemo[9647:1226741] raw：(null)
2018-03-03 20:32:27.725361+0800 HppleDemo[9647:1226741] content：Hell
2018-03-03 20:32:27.725464+0800 HppleDemo[9647:1226741] tagName：text
2018-03-03 20:32:27.725553+0800 HppleDemo[9647:1226741] attributes：{
}
2018-03-03 20:32:27.726085+0800 HppleDemo[9647:1226741] raw：<font color="red">o w</font>
2018-03-03 20:32:27.726243+0800 HppleDemo[9647:1226741] content：o w
2018-03-03 20:32:27.726401+0800 HppleDemo[9647:1226741] tagName：font
2018-03-03 20:32:27.726551+0800 HppleDemo[9647:1226741] attributes：{
    color = red;
}
2018-03-03 20:32:27.726694+0800 HppleDemo[9647:1226741] raw：(null)
2018-03-03 20:32:27.739766+0800 HppleDemo[9647:1226741] content：orld
2018-03-03 20:32:27.739906+0800 HppleDemo[9647:1226741] tagName：text
2018-03-03 20:32:27.740002+0800 HppleDemo[9647:1226741] attributes：{
}

以上，就是Hpple的基本使用，如有问题，欢迎指正。