Jsoup 替换文本中所有的img src属性

解决思路:在本地展示使用本地的src,发送到微信的时候使用微信的src.要实现功能,先需要做一些工作.

    1.在富文本框中上传图片的时候,使用本地图片地址插入到img标签中,并且将微信的src保存到data-src.

<img wxImg-src="weixinurl" src="localurl"/>

    2.在提交到后台的时候,使用Jsoup将src中的内容替换为wxImg-src.

   /**
	 * 将htmlBody中所有img标签中的src内容替换为原data-src的内容,
	 * <br/>如果不报含data-src,则src的内容不会被替换
	 * <br/>例如: 
	 * <br/> 替换前 &lt;img data-src="weixinImgUrl" src="localImgUrl" othreAttr="其他属性不变"/&gt;
	 * <br/> 替换后 &lt;img src="weixinImgUrl" othreAttr="其他属性不变" /&gt;
	 * @param htmlBody html内容
	 * @return 返回替换后的内容
	 * @author Leon Tan
	 */
	public static String replaceImgSrcFromDataSrc(String htmlBody) {
		Document document = Jsoup.parseBodyFragment(htmlBody);
		Elements nodes = document.select("img");
		int nodeLenth = nodes.size();
		for (int i = 0; i < nodeLenth; i++) {
			Element e = nodes.get(i);
			String dataSrc = e.attr("data-src");
			if (StringUtils.isNotBlank(dataSrc)){
				System.out.println(dataSrc);
				e.attr("src", dataSrc);
				e.removeAttr("data-src");
			}
		}
		if (htmlBody.contains("<html>")){
			return document.toString();
		}else{
			return document.select("body>*").toString();
		}
	}

   // 测试代码
   public static void main(String[] args) {
		String context = 
				"<div>" +
				"  <div>123123123123<p>asdfasdfasdf</p></div>" +
				"  <img data-src=\"http://mmbiz.qpic.cn/mmbiz_jpg/iamNUozwoQLl1Pta8vlKQRJgcZzwzbcpxnNaQ1Xy1eAt90On0SwzVabQPeMXN6ksvrSXVhkpiaAYFC0XesYqFTng/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1\" src=\"http://www.fong.site/pic135editor/50014/7356.jpg\"/>" +
				"  <p><img data-src=\"weixin\" style=\"width:99px;\" src=\"local\"/></p>" +
				"  <p><img src=\"没有data-src\"/></p>" +
				"</div>";
		System.out.println(replaceImgSrcFromDataSrc(context));
	}

    3.将最终返回的结果另存到一个新的字段中,这样在本地显示的时候,就获取原字段内容,发送给微信的时候就取新字段内容.

    输出

    

<div> 
 <div>
  123123123123
  <p>asdfasdfasdf</p>
 </div> 
 <img src="http://mmbiz.qpic.cn/mmbiz_jpg/iamNUozwoQLl1Pta8vlKQRJgcZzwzbcpxnNaQ1Xy1eAt90On0SwzVabQPeMXN6ksvrSXVhkpiaAYFC0XesYqFTng/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1"> 
 <p><img style="width:99px;" src="weixin"></p> 
 <p><img src="没有data-src"></p>
</div>

///

无关说明

    本来第一时间想到的是使用正则表达式来做,但是做出来之后感觉很大局限性.

    //通过正则表达式将img标签中的src内容替换为data-src中的内容

    /**
	 * 通过正则表达式将img标签中的src内容替换为data-src中的内容
	 * @param context 要替换的内容
	 * @return
	 * @author Leon Tan
	 */
	public static String replaceImgSrcFromDataSrc(String context){
		Pattern p = Pattern.compile("((data-src|src)\\s*=(\"|\')[0-9a-zA-Z:/\\.\\?\\s_\\-=&]*(\"|\'))", Pattern.CASE_INSENSITIVE);
        Matcher m = p.matcher(context);
        StringBuffer sb = new StringBuffer(context);
        String temp = null;
        int replaceIndex = 0;
        while (m.find()) {
        	String find = m.group();
        	if (find.indexOf("data-src") > -1){
        		temp = find;
        	}else{
        		if (temp != null){
            		replaceIndex = sb.indexOf(find, replaceIndex);
            		sb.replace(replaceIndex, replaceIndex+find.length(), "src"+temp.substring(8));
        		}
        	}
		}
        return sb.toString();
	}

本文地址:https://my.oschina.net/longfong/blog/819883

转载于:https://my.oschina.net/longfong/blog/819883

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值