项目场景:
项目场景:项目的后台返回的有媒体组件 比如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
},
到此结束~