不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）

在这里插入图片描述
用过小程序rict-text的帅哥靓女们（说的就是正在看文章的你）都知道，rich-text是无法解析富文本中的video标签的，本文教你如何优雅的在不使用插件的情况下完整的渲染富文本

首先是富文本图片自适应的问题

当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致

//content为富文本
content = content.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   //图片自适应

如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将<br>标签替换掉

//richtext为后端传过来的富文本
dealRichText(richtext) {let content = '';content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');return content},

在这里插入图片描述

然后我们来处理富文本中的视频问题

既然小程序的rict-text不能渲染视频，那我们不妨就将富文本切割成部分富文本和视频相间隔的数组（有点拗口了昂），话不多上，给各位客官上才艺

//richtext是富文本
dealVideo(richtext){let contentArr = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')contentArr = richtext.split(/<video [^>]*src=['"]([^'"]+)[^>]*><\/video>/)return contentArr//contentArr中偶数为视频链接地址，奇数为富文本，利用循环渲染出来}

不想看代码的客观可以直接复制代码使用！

代码中的contentArr就是富文本和视频相间隔的数组，偶数为视频链接地址，奇数为富文本，利用循环渲染出来(这里用的是uniapp来写得，用原生也是一样的思路，写法不一样)

<view  v-for="(item,index) in contentArr"><rich-text :nodes="item" v-if="index%2==0||index==0"></rich-text><video :src="item" v-if="index%2==1" style="width: 100%;" controls></video>
</view>