uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕

重要的地方,例如<img src="https://cdn2.xxkucun.com/xxkucun/tuwen/20200904/1d959815-6a1c-4eb2-93b7-25ff3d6559eb?x-oss-process=style/xptw" data-ratio="1" alt="fca7c67836811c375a66e46fdcbc0ca5.gif" data-w="1" width="353" height="201" style="width: 353px; height: 201px;"/>这种,直接写死了width,height,这个是真的烦

正则太差,网上也没有找到合适的案例,只能自己用死办法解决了

/**
* 去除图片中的width属性,height属性
*
* @param img 图片字符串
* @return 返回去除后的字符串
*/
public static String replaceImgWidthHeight(String img) {
// 去掉width属性
String patternWidth = "width=\"\\d*\"";
Pattern r = Pattern.compile(patternWidth);
Matcher m = r.matcher(img);
while (m.find()) {
img = img.replace(m.group(), "");
}
// 去掉height属性
String patternHeight = "height=\"\\d*\"";
Pattern rh = Pattern.compile(patternHeight);
Matcher mh = rh.matcher(img);
while (mh.find()) {
img = img.replace(mh.group(), "");
}
// 替换style中的width属性
String styleWidth = "width:.*?px;";
Pattern sw = Pattern.compile(styleWidth);
Matcher swh = sw.matcher(img);
while (swh.find()) {
img = img.replace(swh.group(), "max-width:100%;");
}
// 替换style中的height属性
String styleHeight = "height:.*?px;";
Pattern sh = Pattern.compile(styleHeight);
Matcher shh = sh.matcher(img);
while (shh.find()) {
img = img.replace(shh.group(), "height:auto;");
}
return img;
}

/**
* 获取HTML代码中的img标签,并修改图片属性为自适应
* @param str HTML代码
* @return
*/
public static String replaceHtmlImgWidthHeight(String str) {
String rg = "<img.*?>";
Pattern compile = Pattern.compile(rg);
Matcher matcher = compile.matcher(str);
while (matcher.find()) {
String img = matcher.group();
str = str.replace(img, StringUtil.replaceImgWidthHeight(img));
}
return str;
}

搞了半天,终于解决了,看效果也确实自适应了,没有超过屏幕了,搞定之后发现有个好简单的办法,直接在view中设置样式style="width: 100%;overflow: hidden;"
<view style="width: 100%;overflow: hidden;" v-html="product.remark"></view>
超出部分直接隐藏好了,看供应商那边的App也是这样做的,有些图片只显示了一半,思路很重要啊,一行代码超出隐藏,一分钟解决了,结果写了半天的正则,正则还是太差了,唉
各位路过的大佬有更好的解决方案,欢迎评论区贴出,好让我学习学习

uniapp vue v-html,显示富文本,内容img图片超出解决办法的更多相关文章

  1. ueditor富文本编辑器跨域上传图片解决办法

    在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...

  2. iOS swift 富文本显示 富文本在iOS中使用场景和解决方案

    项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...

  3. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  4. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

  5. PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  6. html处理富文本内容,避免XSS工具类

    import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...

  7. 使用UIWebView中html标签显示富文本

    使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

  8. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  9. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

随机推荐

  1. Mybatis入门(二)------增删改查

    Mybatis增删改查基本操作 一.XML实现方式 1.mapper.xml的配置 <?xml version="1.0" encoding="UTF-8" ...

  2. 点击按钮出现时间javascrip代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Python中pytesseract库的使用以及注意事项

    当我们在使用pytesseract库的时候,使用 pip install pytesseract安装完成后,发现它并不能识别出图片内容,并且会抛出异常pytesseract.pytesseract.T ...

  4. Mysql锁【转】

    一.概述 数据库锁定机制简单来说,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则.对于任何一种数据库来说都需要有相应的锁定机制,所以MySQL自然也不能例外. M ...

  5. 码云git clone报错Incorrect username or password ( access token )

    使用码云将仓库clone到本地,报错信息如下: D:\>git clone https://gitee.com/ycyzharry/helloworld.git Cloning into 'he ...

  6. 要不是真的喜欢学技术,谁会来用Python爬小姐姐啊

    养成习惯,先赞后看!!!不用于任何商业价值,只是自己娱乐.否则 爬虫爬的好,牢饭吃到饱.这是我们这次爬取的网址:https://www.vmgirls.com/ 很多人学习python,不知道从何学起 ...

  7. AppStore SDK

    ios审核被拒4.3 http://www.cocoachina.com/bbs/read.php?tid-1731757.html ios审核4.3被拒? 别担心 这几步让你的 App 顺利过审 h ...

  8. Unity游戏Mono内存管理及泄漏

    UWA工具 https://yq.aliyun.com/articles/435553 Unity游戏Mono内存管理及泄漏 https://wetest.qq.com/lab/view/135.ht ...

  9. 12 props 传的是数组处理

    <template> <div>InfoDetailed</div> </template> <script> export default ...

  10. 查看带有A-Time的执行计划

    先执行 SQL> alter session set statistics_level=all; 会话已更改. 再执行SQL语句: SQL> select count(*) from tb ...