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

Morakes

已于 2022-03-18 11:30:33 修改

阅读量2.5k

点赞数 6

分类专栏：小程序文章标签： javascript 前端 html5 微信小程序

于 2022-03-17 23:58:57 首次发布

本文链接：https://blog.csdn.net/weixin_47348518/article/details/123563075

版权

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

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

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

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

//richtext为后端传过来的富文本

优惠劵

关注关注