iOS的webView怎么样实现html的离线缓存

这个实现难点在缓存图片上。html代码的缓存对你来说不是问题吧。基于这个前提，
下面这个方案是本人本人做的，也具体在项目实现了。思路是这样的：
第1步、先获取html页面里全部图片地址。
方法一：离线获取获取到html代码。html代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的全部img标签url。假如是相对url，就加上host。假如是绝对url，就直接下载。这样这个页面里的全部图片路径都拿到了。
方法一的获取img标签url的正则表达式：
NSString *urlPattern = @”<img[^>]+?src=[“”]?([^>””]+)[“”]?”;
方法二：通过webview和js 本地程序的交换，获取到html页面全部图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下：

//获取web里的全部的img url
- (NSString *)createImgArrayJavaScript{
    NSString *js = @"var imgArray = document.getElementsByTagName("img"); var imgstr = ""; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ";";} return imgstr; } f();";
    return js;
}
//返回web img图片的数量
- (NSString *)createGetImgNumJavaScript{
    NSString *js = @"var imgArray = document.getElementsByTagName("img");function f(){ var num=imgArray.length;return num;} f();";
    return js;
}

第2步、把下载图片到本地，把本地的图片设置到html代码中去显示。
通过上面说的两个方法，你可以获取到图片地址了并且能下载到本地了。那没网络的情况下怎么把这些图片再设置到html页面里呢？
方法：下载到本地的图片命名一律使用图片url的md5。原因是url直接做不了图片的名称。
下面这段代码演示了下载图片和设置本地图片的全过程。代码的逻辑是：有本地图片，就显示本地图片，假如没有则从网络获取。还有对应的js代码。设置图片是还判断图片的宽度，大于300时，就等比例缩小。

- (void)downLoadImageFromURL:(NSArray* )imageUrlArray
{
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0ul);
    dispatch_group_t group = dispatch_group_create();
    
    for (int i = 0; i < imageUrlArray.count; i++)
    {
        NSString *imageUrl = [imageUrlArray objectAtIndex:i];
        NSString *key = [imageUrl MD5Hash];
        NSData *data = [FTWCache objectForKey:key];
        NSURL *imageURL = [NSURL URLWithString:imageUrl];
        NSString *index = [NSString stringWithFormat:@"%d", i];
        if (data) {
            [_detailWebView stringByEvaluatingJavaScriptFromString:[self createSetImageUrlJavaScript:index
                                                                                              imgUrl:key]];
            
        }else{
            dispatch_group_async(group, queue, ^{
             NSData *data = [NSData dataWithContentsOfURL:imageURL];
             if (data != nil) {
                 [FTWCache setObject:data forKey:key];
                 dispatch_sync(dispatch_get_main_queue(), ^{
                     [_detailWebView stringByEvaluatingJavaScriptFromString:[self createSetImageUrlJavaScript:index
                                                                                                       imgUrl:key]];
                     
                    
                     DDLOG(@"image i %d",i);
                 });
                  
             }
        });
        
        }
    }
    
    dispatch_group_notify(group, dispatch_get_main_queue(), ^{
        //这里是全部图片下载完成后执行的操作。
    });
    
    dispatch_release(group);
}
//设置下载完成的图片到web img
- (NSString *)createSetImageUrlJavaScript:(NSString *) index imgUrl:(NSString *) url{
    NSData *imageData = [FTWCache objectForKey:url];
    UIImage  *image = [UIImage imageWithData:imageData];
    int imageWidth = 300;
    int imageHeight = image.size.height*300.0f/image.size.width;
    NSString *js = [NSString stringWithFormat:@"var imgArray = document.getElementsByTagName("img"); imgArray[%@].src="%@"; imgArray[%@].width="%d";imgArray[%@].height="%d" ;" , index, url, index,imageWidth,index,imageHeight];
    return js;
}

完整的通过正则获取html代码中的全部图片url的代码如下:

- (void) getImageUrlArray:(NSString*) content
{
    DDLOG_CURRENT_METHOD;
    NSString *urlPattern = @"<img[^>]+?src=[""]?([^>""]+)[""]?";
    NSError *error = [NSError new];
    
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:urlPattern options:NSRegularExpressionCaseInsensitive error:&error ];
    
    //match 这块内容非常强大
    NSUInteger count =[regex numberOfMatchesInString:content options:NSRegularExpressionCaseInsensitive range:NSMakeRange(0, [content length])];//匹配到的次数
    if(count > 0){
        NSArray* matches = [regex matchesInString:content options:NSMatchingReportCompletion range:NSMakeRange(0, [content length])];
        
        for (NSTextCheckingResult *match in matches) {
            
            NSInteger count = [match numberOfRanges];//匹配项
            for(NSInteger index = 0;index < count;index++){
                NSRange halfRange = [match rangeAtIndex:index];
                if (index == 1) {
                    [listImage addObject:[content substringWithRange:halfRange]];
                }
            }
        }//遍历后可以看到三个range，1、为整体。2、为([\w-]+\.)匹配到的内容。3、(/?[\w./?%&=-]*)匹配到的内容
    }
}