從網頁撈取所有圖片網址

前言

最近專案開發上遇到需要抓取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內文抓出來就需要用到陣規表示式的語法來判斷 的Tag

NSString *pattern =@"]*/>";

有了這個判斷規則後，便可以開始從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來看發現並不是我們要的圖片網址，但確實有根據我們剛剛所指定的規則搜尋到資料。

"{21885, 131}{ ]*/> 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