富文本框html怎么提示超长,uniapp vue v-html，显示富文本，内容img图片超出解决办法...

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

重要的地方，例如这种，直接写死了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 = "";

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;"

超出部分直接隐藏好了，看供应商那边的App也是这样做的，有些图片只显示了一半，思路很重要啊，一行代码超出隐藏，一分钟解决了，结果写了半天的正则，正则还是太差了，唉

各位路过的大佬有更好的解决方案，欢迎评论区贴出，好让我学习学习

原文：https://www.cnblogs.com/pig0316/p/13717681.html