我们在使用 uni-app 开发前端页面时，经常会用到富文本展示数据，如果使用自带富文本组件 rich-text，前端渲染富文本中的图片的时候可能会因为宽度问题出现不能显示完整的情况，如果是在 H5 中比较好办，直接设置样式就能达到预期效果，这边就不展开。本文主要记录在微信小程序中使用 rich-text 时对图片宽度进行自适应处理，以达到能完全显示。废话不多说，直接上代码：

JS 代码：

<script>
    export default {
        data() {
            return {
                richData: ''
            }
        },
        methods: {
            formatRichText(html) { // 富文本内容格式化
                return html && html.replace(/<img[^>]*>/gi, function(match, capture) { // 查找所有的 img 元素
                    return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi, '') // 删除找到的所有 img 元素中的 style 属性
                }).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
            }
        }
    }
</script>

HTML 代码：

<template>
    <rich-text :nodes="formatRichText(richData)"></rich-text>
</template>

如果项目中使用富文本的地方比较多，也可以将格式化函数公共化或全局化使用。如果还有其他需求（如：图片增加圆角、阴影效果等）可以在格式化函数中补充。