Android检测富文本中的<img标签并实现点击效果

本文旨在：通过点击一张图片Toast输出位置与url链接。

闲话少说，实现原理大概是酱紫的：：通过正则表达式检测富文本内的图片集合并获取url，在src=“xxx” 后面添加 onclick方法，至于js如何load进去本人是自己拼接了一个html标签的上下文

js调用java方法请自行搜索不在本文讨论范围。

public class HtmlUtils {

    /**
     * 获取html中的所有图片
     * @param compatText
     * @return
     */
    public static List<String>  filterImages(String compatText){
        List<String> uList = new ArrayList<>();
        if(!TextUtils.isEmpty(compatText)&&compatText.contains("<img")){
            //get img src
            Pattern p = Pattern.compile("<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>");//<img[^<>]*src=[\'\"]([0-9A-Za-z.\\/]*)[\'\"].(.*?)>");
            Matcher m = p.matcher(compatText);
            String searchAttrib = "src";
            String regxpForTagAttrib = searchAttrib + "\\s*=\\s*[\"|']http://([^\"|']+)[\"|']";//"=[\"|']([^[\"|']]+)[\"|']";
            Pattern patternForAttrib = Pattern.compile(regxpForTagAttrib);
            while(m.find()){
                Matcher matcherForAttrib = patternForAttrib.matcher(m.group());
                if (matcherForAttrib.find()) {
                    System.out.println("poe " +"http://" +matcherForAttrib.group(1));
                    uList.add("http://" +matcherForAttrib.group(1));
                }
            }
        }
        return  uList;
    }

    /**
     * 1.向富文本中插入执行函数sayHello
     * 2.修改后的文本插入<html></html> 组合为新的页面 .
     * @param compatText
     */
    public static String constructExecActionJs(String compatText){
        StringBuffer sb = new StringBuffer();
        sb.append("<html> " +
                "<script type=\"text/javascript\"> " +
                "  function showImage(position , url) {\n" +
                "        window.control.showImage(position,url)\n" +
                "    }"+
                "</script>");
        //插入函数
        sb.append(insertExecActionJs(compatText));
        sb.append("</html>");
        return  sb.toString();
    }

    public static String insertExecActionJs(String compatText){
        String searchAttrib = "src";
        String regxpForTag ="<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>";
        Pattern patternForTag = Pattern.compile(regxpForTag);
        String regxpForTagAttrib = searchAttrib + "\\s*=\\s*[\"|']http://([^\"|']+)[\"|']";//"=[\"|']([^[\"|']]+)[\"|']";
        Pattern patternForAttrib = Pattern.compile(regxpForTagAttrib);
        Matcher matcherForTag = patternForTag.matcher(compatText);
        StringBuffer sb = new StringBuffer();
        boolean result = matcherForTag.find();
        int pos = 0 ;
        while (result) {
            StringBuffer sbreplace = new StringBuffer();
            System.out.println(matcherForTag.group());
            Matcher matcherForAttrib = patternForAttrib.matcher(matcherForTag.group());

            if (matcherForAttrib.find()) {
                System.out.println("ll"+matcherForAttrib.group());
                matcherForAttrib.appendReplacement(sbreplace, searchAttrib+"=\"http://"
                        + matcherForAttrib.group(1) +"\""+ " onclick=\"showImage(" +
                        +pos+"," +
                        "'http://" +matcherForAttrib.group(1) +"'"
                        +")\"");
            }
            matcherForAttrib.appendTail(sbreplace);
            matcherForTag.appendReplacement(sb, sbreplace.toString());
            result = matcherForTag.find();
            pos++;
        }
        matcherForTag.appendTail(sb);
        System.out.println("poe: "+sb.toString());
        return  sb.toString();
    }
}

Activity中代码如下：

mWebView.getSettings().setDefaultTextEncodingName("utf-8");
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JsInteration(),"control");

public class JsInteration {
        @JavascriptInterface
        public void showImage(int position ,String url) {
            Toast.makeText(getApplicationContext(), position+":"+url, Toast.LENGTH_LONG).show();
        }
    }

调用：

WebViewUtils.setContentToWebView(mWebView,HtmlUtils.constructExecActionJs(blogDetail.getBlogContent()));

posted on 2016-05-31 09:59 小老虎2 阅读(1999) 评论(0) 编辑收藏举报