uniapp rich-text 小程序渲染不了富文本视频

项目场景：

项目场景：项目的后台返回的有媒体组件 比如img video embed

---

问题描述

uniapp使用 html 渲染 无法渲染 视频组件 并且 无法特别定义img 的样式

---

解决方案：

转化下思路，将富文本里边没有办法渲染的媒体组件，无法自定义样式的img组件通过正则取出来

原本如下

<view class="text" v-html="value"></view>

更改后

// 这个地方是将原本的富文本数据切割成数组
<view v-for="(item,index) in content">
		//通过正则将富文本数据切割为{type:'',value:''}的数组对象 并通过type区分普通富文本和video
		//普通富文本value放置正常富文本内容
		<view v-if="item.type=='rich-text'" class="text" v-html="item.value"></view>
		//video value 放置视频地址
		<video v-else :src="item.value" style="width: 92vw;height: 80vh;left: 50%;transform: translateX(-50%);"></video>
</view>

下面是js部分代码

//将从后台获取的富文本内容进行再解析
formatImg(html) {
		//通过正则匹配图片
		var newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
			//通过正则找到img alt 之后的文本用样式覆盖这部分内容
			var match = match.replace(/alt=\""/gi, 'style="max-width:100%;height:auto"');
			return match;
		});
		//通过正则匹配视频
		//embed跟video是类似的，为什么会加这块匹配，是因为本人在正常使用富文本的时候发现有的时候会返回embed标签 有的时候返回video
		var newContent = newContent.replace(/<embed[^>]*>/gi, function(match, capture) {
			var match = match.replace(/type=[^>]*>/gi, '></embed>');
			return match;
		});
		var newContent = newContent.replace(/<video[^>]*>/gi, function(match, capture) {
			var match = match.replace(/type=[^>]*>/gi, '></embed>');
			return match;
		});
		let videoList = [];
		let embedReg = /<embed.*?(?:>|\/>)/gi; //匹配到字符串中的 embed 标签
		let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
		let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 embed video 标签 的路径
		let arr = newContent.match(embedReg) || newContent.match(videoReg) || []; // arr 为包含所有 embed video标签的数组
		let articleList = newContent.split('</embed>') // 把字符串 从视频标签分成数组
		arr.forEach((item, index) => {
			var src = item.match(srcReg);
			videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径
		})
		let needArticleList = [];
		articleList.forEach((item, index) => {
			if (item != "" && item != undefined) { // 常见的标签渲染
				needArticleList.push({
					type: 'rich-text',
					value: item
				});
			}
			let articleListLength = articleList.length; // 插入到原有video 标签位置
			if (index < articleListLength && videoList[index] != undefined) {
				needArticleList.push({
					type: 'video',
					value: videoList[index]
				})
			}
		})
	return needArticleList
},

到此结束~