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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应） -> 正文阅读

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

在这里插入图片描述
用过小程序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>