前言
最近專案開發上遇到需要抓取HTML內文的圖片，在最近剛好有些時間就把之前寫的Source整理一下並開放到Github上面，下面會介紹一下這個這個功能的操作並為大家一步一步的解析。
介紹
一般在用WebView開啟網頁的內容通常有兩種方法：
1.直接用url開啟網頁
NSURL *websiteUrl=[NSURL URLWithString:@"http://www.google.com"];
NSURLRequest *urlRequest=[NSURLRequestre questWithURL:websiteUrl];
[myWebView loadRequest:urlRequest];
2.開啟HTML內文
NSString*htmlFile=[[NSBundlemainBundle]pathForResource:@"html"ofType:@"html"];
NSString*htmlString=[NSStringstringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:nil];
這篇文章就是要介紹該如何把上述兩種的網頁內圖片給抓出來，其實講兩種真的作法其實就是一種而已，讀取網址後在底層的SDK也是會轉換成HTML的內文，所以這邊我們要先將網址轉換成HTML的文字字串，在從內文去抓取我們要的圖片網址。
作法
首先如果拿到的是網址格式如(http://www.google.com)，便要先轉成HTML
NSURL*url = [NSURLURLWithString:string];
NSError*error;
NSString*string = [NSString stringWithContentsOfURL:url encoding:NSASCIIStringEncoding error:&error];
這樣就可以拿到HTML的內文了，取的內文後，網頁內的格式通常為。
<html>
<body>
<p>這是段文字</p>
<img src= “https://pic.pimg.tw/timmyvong/1384342688-1767482568.gif" />
</body>
</hmtl>
這邊我們要將圖片從HTML內文抓出來就需要用到陣規表示式的語法來判斷 <img /> 的Tag
NSString *pattern =@"<img.*?src=[^>]*/>";
有了這個判斷規則後，便可以開始從HTML內文抓取有img tag的圖片網址
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionAllowCommentsAndWhitespace error:nil];
NSArray *result = [regex matchesInString:_htmlString options:NSMatchingReportCompletion range:NSMakeRange(0, _htmlString.length)];
取到result之後印出Log來看發現並不是我們要的圖片網址，但確實有根據我們剛剛所指定的規則搜尋到資料。
"<NSSimpleRegularExpressionCheckingResult : 0x7f93107647e0>{21885, 131}{<NSRegularExpression: 0x7f9310765c40> <img.*?src=[^>]*/> 0x2}"
因此我們還需要做些事情來取得我們所需要的圖片網址
@autoreleasepool {
for (NSTextCheckingResult *item in result) {
NSString *imgHtml = [_htmlString substringWithRange:[item rangeAtIndex:0]];
NSArray *tmpArray = nil;
if ([imgHtml rangeOfString:@"src=\""].location != NSNotFound) {
tmpArray = [imgHtml componentsSeparatedByString:@"src=\""];
} else if ([imgHtml rangeOfString:@"src="].location != NSNotFound) {
tmpArray = [imgHtml componentsSeparatedByString:@"src="];
}
if (tmpArray.count >= 2) {
NSString *src = tmpArray[1];
NSUInteger loc = [src rangeOfString:@"\""].location;
if (loc != NSNotFound) {
src = [src substringToIndex:loc];
NSString *newSrc = nil;
if (![src hasPrefix:@"http"]) {
newSrc = [NSString stringWithFormat:@"https:%@",src];
NSRange range = [newSrc rangeOfString:@"?v="];
if (range.length > 0) {
NSMutableString *new = [NSMutableString stringWithString:newSrc];
[new deleteCharactersInRange:NSMakeRange((unsigned long)range.location, src.length - (unsigned long)range.location)];
src = new;
}
}else {
NSRange range = [src rangeOfString:@"?v="];
if (range.length > 0) {
NSMutableString *new = [NSMutableString stringWithString:src];
[new deleteCharactersInRange:NSMakeRange((unsigned long)range.location, src.length - (unsigned long)range.location)];
src = new;
}
}
NSLog(@"%@",src);
}
}
}
}
這樣印出來的Log就會是我們想要的圖片網址。
這邊附上我範例上的Demo：
https://github.com/chueh/SWebViewImageDownload
也封裝好了，如有需要的可以直接去pod下載，使用方法：
在podfile內新增
pod "SWebViewImageDownload"，接著pod install
使用：
給定一個網址
NSString *url = @"[http://xxxx.com](http://xxxx.com/)";
初始化SWebViewImageDownload，並給stringType（StringTypeWithURL為一般網址、StringTypeWithHTML為HTML Body內文）
SWebViewImageDownload *webImageDownload = [[SWebViewImageDownload alloc] initWithHTMLString:url stringType:StringTypeWithURL];
這是Demo的圖片
Simulator Screen Shot 2016年6月1日 下午12.03.06.png
