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());
uList.add("http://" +matcherForAttrib.group());
}
}
}
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 = ;
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() +"\""+ " onclick=\"showImage(" +
+pos+"," +
"'http://" +matcherForAttrib.group() +"'"
+")\"");
}
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()));
Android检测富文本中的<img标签并实现点击效果的更多相关文章
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- 从html富文本中提取纯文本
其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式. 所以只需要将富文本字符串中的“<.....>”标签剔除,即可得到纯文本.我们可以使用正则表 ...
- Android WebView的HTML中的select标签不起作用
Android WebView的HTML中的select标签不起作用 经过查询资料,了解到android对html里的select标签是弹出一个原生的选择器. 问题: Webview中的select没 ...
- 清除文本中Html的标签
/// <summary> /// 清除文本中Html的标签 /// </summary> /// <param name="Content"> ...
- C# 清除文本中的HTML标签
/// <summary> /// 清除文本中Html的标签 /// </summary> /// <param n ...
- 微信小程序富文本中的图片大小超出屏幕
这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi, '& ...
- vue修改富文本中的元素样式
富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...
- python去除文本中的HTML标签
def SplitHtmlTag(file): with open(file,"r") as f,open("result.txt","w+" ...
- selenium自动化测试在富文本中输入信息的方法
第一次用selenium+python编写自动测试脚本,因为页面中插入了富文本编辑,开始怎么都无法输入进去,度娘好多方法都无效,分享踩坑的经历一是为了记录一下自己的成长,二是为了给同样摸索seleni ...
随机推荐
- P3386 【模板】二分图匹配
题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正整数u,v,表示u,v有一条连边 ...
- Stream My Contest UVA - 11865（带权最小树形图+二分最小值最大化）
#include <iostream> #include <cstdio> #include <sstream> #include <cstring> ...
- 表单验证2-JS正则
1. JS正则: 以/开头,以/结尾. test作用:到里面去找,只要里面有,就返回true:否则就返回false. 例如:rep=/\d+/; 检验里面是否有数字. 2.rep=/^ $/; ...
- Java SSM 整合
从2012年的“用户标签”到2014年的“用户画像”,从2015年的“大数据”到2017年的“人工智能”,大数据正在从神坛走向现实.“标签”到“画像”,代表着数据在数量和维度上,逐渐在丰富:“大数据” ...
- 十五分钟介绍 Redis数据结构--学习笔记
下面是一个对Redis官方文档<A fifteen minute introduction to Redis data types>一文的翻译,如其题目所言,此文目的在于让一个初学者能通过 ...
- mysql允许远程特定ip访问
1.登录 mysql -u root -p 之后输入密码进行登陆 2.权限设置及说明 2.1添加远程ip访问权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'10.1 ...
- 网络编程----socket介绍、基于tcp协议的套接字实现、基于udp协议的套接字实现
一.客户端/服务器架构(C/S架构) 即C/S架构,包括: 1.硬件C/S架构(打印机) 2.软件C/S架 ...
- 弄清楚CSS的匹配原理让你写出高效的CSS
用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...
- Codeforces 526.D Om Nom and Necklace
D. Om Nom and Necklace time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Python-- Redis Set
一.无序集合 Set操作,Set集合就是不允许重复的列表 1.1 sadd(name, values) # name对应的集合中添加元素 1.2 smembers(name) # 获取name对应的集 ...