【uni-app】 rich-text 中图片溢出

前言
Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
微信小程序中预览的图片溢出效果（非期望效果）

-期望的效果

分析
rich-text 为已封装好的组件。向 rich-text传递参数后，由 rich-text进行展现（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向开发者提供控制 rich-text展现的内容样式的方法。

代码1：图片溢出的代码（对应图片溢出效果）：

<img 
style="margin: 0px auto; padding: 0px; display: block; max-width: 800px;"
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />
1
2
3
代码2：图片不溢出的代码（对应期望的效果）：

<img 
style="max-width:100%;height:auto;display:block;margin:0px auto;" 
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

要解决图片溢出，只需要找到将代码1转化为代码2的方法即可。

方法
根据前面的思路，目前有2个方法:

nodes 为 String 类型时，用 replace 方法修改样式。
nodes 为 Array 类型时，遍历Array并修改节点属性（找到样式节点，并进行修改）。
因为支付宝小程序只支持nodes 为 Array 类型的使用方法，所以，方法2更通用一些，可以参考这里。
关于方法1的介绍，可以参考这里。下面介绍一下方法1。

另，下面这样的方法，在H5中有效：

    /* 在H5 rich-text 控件会被翻译为 uni-rich-text */
    uni-rich-text img {
        max-width: 100% !important;
    }
1
2
3
4
操作
1. 先编写修改样式的方法
    export default {
        components: {
        },
        data() {
            return {
            }
        },
        onReady() {
        },
        methods: {
            /**
             * 处理富文本里的图片宽度自适应
             * 1.去掉img标签里的style、width、height属性
             * 2.修改所有style里的width属性为max-width:100%
             * 3.img标签添加style属性：max-width:100%;height:auto
             * 4.去掉<br/>标签
             * @param html
             * @return string
             */
            formatRichText (html) {
                // 去掉img标签里的style、width、height属性
                let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
                    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                    return match;
                });
                // 修改所有style里的width属性为max-width:100%
                newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
                    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                    return match;
                });
                // 去掉<br/>标签
                newContent = newContent.replace(/<br[^>]*\/>/gi, '');
                // img标签添加style属性：max-width:100%;height:auto
                newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
                return newContent;
            }
        }
    }

2.修改样式的方法
<rich-text :nodes="formatRichText(content)"></rich-text>
1
3.改进
可以封装成js库，方便以后使用。

richTextUtil.js
/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.修改所有style里的width属性为max-width:100%
 * 3.img标签添加style属性：max-width:100%;height:auto
 * 4.去掉<br/>标签
 * @param html
 * @return string
 */
function formatRichText (html) {
    // 去掉img标签里的style、width、height属性
    let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
    });
    // 修改所有style里的width属性为max-width:100%
    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
        return match;
    });
    // 去掉<br/>标签
    newContent = newContent.replace(/<br[^>]*\/>/gi, '');
    // img标签添加style属性：max-width:100%;height:auto
    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
    return newContent;
}

export default {
    formatRichText,
};
引入js库
import richTextUtil from '@/common/richTextUtil.js';
1
调用方法
this.content = richTextUtil.formatRichText(res.content);
1
rich-text：

<rich-text :nodes="content"></rich-text>
1
参考
https://blog.csdn.net/qq_37682202/article/details/100522172
https://www.jb51.net/article/154976.htm
https://www.jianshu.com/p/b87a0ff0f5b4
————————————————
版权声明：本文为CSDN博主「sayyy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sayyy/article/details/107954323