uniapp vue v-html，显示富文本，内容img图片超出解决办法

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图片超出解决办法

最新文章

热门文章