小程序中富文本的处理（内含图片）

页面显示代码：

<!-- 页面直接调用formatRichText方法即可 -->
<rich-text v-if="haveData !==''" class="course-des" :nodes="formatRichText(lawsDetail.courseText)"></rich-text>

//处理富文本标签（内含图片）方法写在methods中，页面直接调用即可
//如果文本中的图片只有<img src="">那么可以直接替换，但是如果有其他的样式比如width,height,style时就需要先去掉其，再替换
/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.img标签添加style属性：max-width:100%;height:auto
 * 3.修改所有style里的width属性为max-width:100%
 * 4.去掉<br/>标签
 */
methods: {
        formatRichText(richText){
          if(richText != null){
                let newRichText= richText.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;
                });
                newRichText = newRichText.replace(/style="[^"]+"/gi,function(match,capture){
                    match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
                    return match;
                });
                newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
                newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
                return newRichText;
            }else{
                return null;
            }
        }
}

转载：https://www.cnblogs.com/lovelh/p/12747497.html

———————————————————————————————————————————————

后期补充：

1.在页面标签中直接处理富文本编辑器中的图片，报错；解决方法：在从后台获取到数据的时间就先处理富文本中的img再显示即可

代码：

this.optionList.title =  this.optionList.title.replace(/\<img/gi, '<img class="richImg"')

.richImg{
		max-width:50% !important;
		height:auto;
		display:block;
		margin-top:8px;
	}

注意：样式类必须写在app.vue中才可以生效