iOS解析新浪微博的@##以及URL链接并展示

最近在做一个跟微博相关的应用。其中涉及到了对微博中@、##以及URL链接的解析与展示。分享一下个人处理的方式，希望对需要的人有所帮助。

最终的展现效果：

        

首先，第一步是你得从纯文本中找到它们。毫无疑问，采用正则表达式匹配是最佳的方式。我采用的是RegexKitLite库。

解析这三种格式的正则表达式如下：

 

[plain] view plaincopyprint?
 
  1. /*****************************regular expressions**************************/  
  2. #define ALABEL_EXPRESSION @"(<[aA].*?>.+?</[aA]>)"  
  3. #define HREF_PROPERTY_IN_ALABEL_EXPRESSION @"(href\\s*=\\s*(?:\"([^\"]*)\"|\'([^\']*)\'|([^\"\'>\\s]+)))"  
  4. #define URL_EXPRESSION @"([hH][tT][tT][pP][sS]?:\\/\\/[^ ,'\">\\]\\)]*[^\\. ,'\">\\]\\)])"  
  5. #define AT_IN_WEIBO_EXPRESSION @"(@[\u4e00-\u9fa5a-zA-Z0-9_-]{4,30})"   
  6. #define TOPIC_IN_WEIBO_EXPRESSION @"(#[^#]+#)"  


分别为：匹配<a></a>标签，匹配a标签的href属性，匹配URL地址，匹配微博中的@，匹配微博中的##(topic);

 

 

对于文本的处理：

 

[plain] view plaincopyprint?
 
  1. - (NSString*)handleForShowing{  
  2.     NSArray *expressions = expressions = [[NSArray alloc] initWithObjects:  
  3.                                           AT_IN_WEIBO_EXPRESSION,  
  4.                                           TOPIC_IN_WEIBO_EXPRESSION,  
  5.                                           URL_EXPRESSION,  
  6.                                           nil];  
  7.       
  8.     //如果有<a></a>则先进行预处理  
  9.     NSString *aLabelExpression=@"(<[aA].*?>.+?</[aA]>)";  
  10.     if ([self stringByMatching:aLabelExpression]) {  
  11.         NSArray *matchedArr=[self componentsMatchedByRegex:ALABEL_EXPRESSION];  
  12.         for (NSString *matchedItem in matchedArr) {  
  13.             NSString *tmpHrefVal=[[matchedItem stringByMatching:HREF_PROPERTY_IN_ALABEL_EXPRESSION]   
  14.                                 stringByMatching:URL_EXPRESSION];  
  15.             if (tmpHrefVal) {  
  16.                 self=[self replaceAll:matchedItem with:tmpHrefVal];  
  17.             }  
  18.         }  
  19.     }      
  20.       
  21.     for (NSString *expression in expressions)  
  22.     {          
  23.         NSString *replaceStr=@"";  
  24.         if ([expression contains:@"@"]) {  
  25.             replaceStr=@"<a href=\"$1\">$1</a>";  
  26.         }else if([expression contains:@"#"]){  
  27.             replaceStr=@"<a href=\"$1\">$1</a>";  
  28.         }else{  
  29.             replaceStr=@"<a href=\"$1\">$1</a>";  
  30.         }  
  31.         self=[self stringByReplacingOccurrencesOfRegex:expression withString:replaceStr];  
  32.     }  
  33.     [expressions release];  
  34.     return self;  
  35. }  

 

 

这里需要注意的是，微博的种类有很多种。大部分的地址都直接是纯粹的Url，但其中的一种微博(记不清是视频还是音乐的)返回的url是附带在a标签的内部作为href属性的。这样就不便于统一处理，所以我采取的做法是：首先，让解析流程统一化。也就是先把文本中包含的a标签去掉，把href包含的链接作为纯文本。然后，解析出微博中的这三种特殊字符串，并为其包裹一层a标签。

接着，谈谈关于展示的问题。上面你可能想知道为什么需要包上一层a标签呢？那是为了展示用的。

如何让@、##、URL高亮呢，我目前只找到三种展示它的方式：

(1)   Three 20中的TTStyledTextLabel

(2)   原先用于展示Twitter，后来被改写支持中文展示的FancyLabel

(3)   最擅长呈现html标记的UIWebView

三种我全部试过，最后还是选择了UIWebView。下面说明一下未曾使用前两种的原因。

其实，原本我是不倾向于使用UIWebView，我想能使用普通的控件，就无需把UIWebView这种大部头搬出来“救场”了(据说UIWebView的内存泄露问题由来已久，后续我会谈到这个问题，本篇不作深究)。

我首先尝试的是第二种：FancyLabel。开始使用的时候，觉得好像真能展示。它文件内部已经存在了解析的正则表达式了，并且RegexKitLite也是作为它的组件使用的(可见原理都是一样的)。但展示了几个发现：@、##、URL各种不同方式的复杂搭配，它显得有些无能为力(这其实是它附带的正则表达式匹配得不够健全的问题)，但当时我却不是这个原因放弃它的。放弃的原因是，它无法“折断换行”，也就是，当一个匹配项它呈现的位置已经在一行的末尾了，它无法呈现匹配项的一部分，同时将另一部分折断到下一行的起始去显示，它的处理方式时另起一行。这看起来非常难看，后面还有空间空出来了，就直接跑到下面一行去展示了，并且该行它也是独占的，后面的文本也不得不另起一行，显得非常不流畅。最致命的是：你无法算准它的高度，因为它归根到底是一个UILabel的子类。对于Label的高度，在它的宽度固定的情况下，通常都是带着它文本的字体大小算出来的。但这个时候，你已经无法准确地计算高度了(因为普通的计算方式，它默认Label文本的呈现方式是那种“流式”的，你换行起始占用了增大了它的高度，但在算的时候你无法将这些情况估算到)，所以它影响了接下来用于呈现评论/转发等控件的布局。

放弃了第二种，又在网上寻找其他的解决方案，发现大名鼎鼎的Three 20里面，有一种呈现富客户端文本的控件：TTStyledTextLabel，支持对连接、简单html标签以及样式。那我将这些解析出来的内容，包裹上<a></a>不就可以了吗？我当时就是这么想。结果同样不是太理想，也是无法折断换行的原因。当然，如果你下面没有依赖它来布局的控件(如同你在web中使用的是绝对定位，而不是相对定位一样)。那么你还是可以使用它的。

这可不像FancyLabel，你直接把接受到的纯文本丢给它一了百了。它自身只负责普通html标签以及链接的解析，所以你给它的文本必须是处理好之后的。其实，你处理好之后展现也是没有问题的。如果你使用的是UITableView的方式来展示它，并且你自定义了UITableViewCell来呈现它，会显得很麻烦。因为这个部分可能要计算两次高度：在heightForRowAtIndexPath代理方法中算一次，在自定义的Cell内部，为了下面控件的布局，必须算一次。其实，TTStyledTextLabel自身是可以返回高度的，并且它返回的高度是正确的(即使它有些匹配项是另起一行的，但占用的“额外”高度也被它包含在内，这也是我认为它很强大的地方)。但，在heightForRowAtIndexPath计算起来就不那么简单了，我简单得把一样的文本给一个“帮助方法”，它内部构建一个TTStyledTextLabel对象，获取到文本，并算高度，还是有所偏差。所以说能不能使用，主要是看你用怎样的方式来展示你的微博内容。如果你想用，这样是不够的，因为它只是完成了呈现的工作。使用过新浪微博或者腾讯微博客户端的人都知道，@、##、URL这些高亮文本是可以点击的。很遗憾的是，TTStyledTextLabel自身对于a标签的点击事件仅仅只是，用它内部的另一个浏览器组件来加载href属性的URL，这显然不是我们想要的。为了改变它这种默认行为，我继承了TTStyledTextLabel，重写了它的点击事件，以拦截它的默认行为：

 

[plain] view plaincopyprint?
 
  1. - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{  
  2.     TTTableView* tableView = (TTTableView*)[self isKindOfClass:[TTTableView class]];  
  3.     if (!tableView) {  
  4.         if (self.highlightedNode) {  
  5.             // nodes to converse with.  
  6.             if ([self.highlightedNode isKindOfClass:[TTStyledLinkNode class]]) {  
  7.                 //NSLog([(TTStyledLinkNode*)_highlightedNode URL]);  
  8.             } else if ([self.highlightedNode isKindOfClass:[TTStyledButtonNode class]]) {  
  9.                 //NSLog([(TTStyledButtonNode*)_highlightedNode URL]);  
  10.             } else {  
  11.                 NSLog(@"others");  
  12.             }  
  13.             self.highlightedNode=nil;  
  14.         }  
  15.     }  
  16. }  

 

在上段代码中：NSLog(@”others”);部分，你可以去实现你的逻辑：比如点击@XXX，弹出XXX的个人详情。你可以在地址中包含你需要的数据，在上面可以通过获得url来得到你的数据。

你可能会好奇，为何这两种方式都出现这种无法折断换行的行为呢。这也是由它们的实现方式决定的。你看到上面这段代码中，比如：TTStyledLinkNode、TTStyledButtonNode，它把相应的匹配项都转化为特定的Node，对这段Node单独绘制(这里牵扯到CoreText以及NSAttributeString等，具体未有空详细研究)，比如某个子节点是可点击的，那可能就是TTStyledButtonNode类型，也就形如一个Button。很明显，一个Button内的文本，如果在一个区域显示不下，只能另起一行了。

要应对这种方式，看来不得不请出：UIWebView。它本身也擅长于图文混排以及富文本的呈现。你只要按照上面的方式处理好文本，然后在UIWebView里设置相关样式，就可以完美呈现，甚至图片都省去了获取并处理的过程。形如：


 

一不用二不休，下面的转发与评论的列表，也顺便用它来展示吧。

展示的问题完美地解决了，下面还要能够响应点击事件。这里同样要改变UIWebView中a标签的默认行为，使其响应本地调用(obj-c代码)。怎么办呢？用js给a标签注册一个click event，然后它调用一个方法，发起一个请求：

[javascript] view plaincopyprint?
 
  1. sendCommand: function (cmd,param){  
  2.         var url="FEB:"+cmd+":"+param;  
  3.         document.location = url;  
  4. }  

 

它其实并不是一个真实意义上的url地址，只是一个携带了操作命令以及参数的“virtual url”。发起的任何请求都会被：

UIWebView 的shouldStartLoadWithRequest代理方法截获。

然后在这里，你可以判断相关的请求行为，获取参数，进行你的本地处理，比如弹出XXX的详情的模式窗口：

 

 

[plain] view plaincopyprint?
 
  1. - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request   
  2.             navigationType:(UIWebViewNavigationType)navigationType {  
  3.     NSString *requestString = [[request URL] absoluteString];  
  4.     NSArray *components = [requestString componentsSeparatedByString:@":"];  
  5.     if ([components count] > 1 &&   
  6.     [(NSString *)[components objectAtIndex:0] isEqualToString:[@"FEB" lowercaseString]]) {  
  7.         NSString *cmdName=(NSString *)[components objectAtIndex:1];  
  8.         if([cmdName isEqualToString:@"loadRepublishList"]) {  
  9.   
  10.         } else if([cmdName isEqualToString:@"loadCommentList"]){  
  11.   
  12.         }  
  13.   
  14.     }  
  15. }  

 

这篇就分享到这里，下面准备就UIWebView的使用分享一些经验。比如使用一些模板引擎来增强代码的可读性以及提升开发效率。对于“微博详情界面”我使用了两个模板：一个是用于呈现微博本身的HTML模板引擎；另一个是JS模板引擎(为了提升响应速度，并且为了配合转发/评论列表的异步加载)。

posted on 2014-11-20 00:35  lgphp  阅读(480)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 lgphp
Powered by .NET 8.0 on Kubernetes