背景:
功能:回复列表
要求:界面按UI给的效果图
收到的数据:带各种标签的html格式的字符串(包括web端的表情图片)
如果只是想简单的加载HTML(包括图片),点击这里。
解决方案:UILabel
或UITextView
加载富文本取代带图片的HTML
- 过滤掉 web端 回复内容 已知 的所有标签
NSString *text = allHtmlText;
//NSLog(@"这是评论的内容%@",text);
text = [text stringByReplacingOccurrencesOfString:@"<p>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"</p>" withString:@"\n"];
text = [text stringByReplacingOccurrencesOfString:@"<u>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"</u>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"<strong>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"</strong>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"<em>" withString:@""];
text = [text stringByReplacingOccurrencesOfString:@"</em>" withString:@""];
2、创建attributedString并获取其中的图片URL及其范围
NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:text];
[self getImageurlFromHtml:string];//具体实现放在文章后面
- 循环遍历创建图片附件 并 替换原有范围的字符串
for (int i= 0 ; i< self.rangeArr.count; i++) {
// 创建图片图片附件
NSTextAttachment *attach = [[NSTextAttachment alloc] init];
NSString *imageUrlStr = self.imageurlArray[i];
NSURL *url = [NSURL URLWithString:imageUrlStr];
NSData *imageData = [NSData dataWithContentsOfURL:url];
attach.image = [UIImage imageWithData:imageData];
attach.bounds = CGRectMake(0, 0, 15, 15);
NSAttributedString *attachString = [NSAttributedString attributedStringWithAttachment:attach];
// 点击图片跳转到safari
NSMutableAttributedString *maImageStr = [[NSMutableAttributedString alloc] initWithAttributedString:attachString];
[maImageStr addAttribute:NSLinkAttributeName value:self.imageurlArray[i] range:NSMakeRange(0, maImageStr.length)];
NSString *rangeStr = self.rangeArr[i];
NSRange range = NSRangeFromString(rangeStr);
if (i>0) {
NSInteger length = 0;
for (int j = 0; j<i; j++) {
NSString *rangeStr0 = self.rangeArr[j];
NSRange range0 = NSRangeFromString(rangeStr0);
length = length + range0.length;
NSLog(@"\nlocation:%ld\nlength:%ld\nstringlength:%ld",range0.location,range0.length,string.length);
}
range.location = range.location - length + i;
}
//创建NSMutableParagraphStyle实例
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
//设置行距
[style setLineSpacing:2.5];
//根据给定长度与style设置attStr式样
[string addAttribute:NSParagraphStyleAttributeName value:style range:NSMakeRange(0, string.length)];
[string replaceCharactersInRange:range withAttributedString:maImageStr];
}
4、设置UI给定的样式
self.textView.scrollEnabled = NO;
[string addAttribute: NSForegroundColorAttributeName value: [UIColor orangeColor] range: NSMakeRange(0, string.length)];
self.textView.attributedText = string
- 获取图片URL方法
- (NSArray *) getImageurlFromHtml:(NSMutableAttributedString *) webString
{
if (webString.length==0) {
return nil;
}
NSString *webStr = [NSString stringWithFormat:@"%@",webString];
self.imageurlArray = [NSMutableArray arrayWithCapacity:1];
self.rangeArr = [NSMutableArray arrayWithCapacity:1];
//标签匹配
NSString *parten = @"<img(.*?)>";
NSError* error = NULL;
NSRegularExpression *reg = [NSRegularExpression regularExpressionWithPattern:parten options:0 error:&error];
NSArray* match = [reg matchesInString:webStr options:0 range:NSMakeRange(0, [webString length] - 1)];
for (NSTextCheckingResult * result in match) {
//过去数组中的标签
NSRange range = [result range];
[self.rangeArr addObject:NSStringFromRange(range)];
NSString * subString = [webStr substringWithRange:range];
//从图片中的标签中提取ImageURL
NSRegularExpression *subReg = [NSRegularExpression regularExpressionWithPattern:@"http://(.*?)\"" options:0 error:NULL];
NSArray* match = [subReg matchesInString:subString options:0 range:NSMakeRange(0, [subString length] - 1)];
NSTextCheckingResult * subRes = match[0];
NSRange subRange = [subRes range];
subRange.length = subRange.length -1;
NSString * imagekUrl = [subString substringWithRange:subRange];
//将提取出的图片URL添加到图片数组中
[self.imageurlArray addObject:imagekUrl];
}
return self.imageurlArray;
}