小程序 rich-text 富文本回显 解决video节点不显
直接看代码
let content = `<p><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594980742996&di=ecacd5a309ec53780fcc0b4eb10a2f49&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" style="max-width:100%;">测试最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源</p><video src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls="{ type: Boolean, required: false, default: true }" oncontextmenu="return false" controlslist="nodownload" style="width:300px;height: 225px"></video><p>且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源且无疑多出了一部分源码资源最大</p><video src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls="{ type: Boolean, required: false, default: true }" oncontextmenu="return false" controlslist="nodownload" style="width:300px;height: 225px"></video><p><br></p><p>的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源最大的缺点就是代码配置多，并且无疑多出了一部分源码资源<br></p>`
1. 一些常用的标签匹配问题
let article =content.replace(/(\<img|\<p)/gi, function ($0, $1) {
return {
"<img": '<img style="width:100%;height:auto;display:block;" ',
"<p": '<p style="text-indent: 24px; color:#333" ',
"<article":"<div",
"</article": "</div",
"<header": "<div",
"</header": "</div"
}[$1];
});
2.解决video不显示问题 （复制直接使用就行）
let videoList = [];
let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
let arr = article.match(videoReg) || []; // arr 为包含所有video标签的数组
let articleList = article.split('</video>') // 把字符串 从视频标签分成数组
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+"</video>"
});
}
let articleListLength = articleList.length; // 插入到原有video 标签位置
if(index<articleListLength && videoList[index] != undefined){
needArticleList.push({
type:'video',
value:videoList[index]
})
}
})
得到 needArticleList 为 常用标签与 video 的组合数组
在 wxml 中渲染使用 如下 样式再根据自己的进行微调就行 👌
<view class="infoContentStyle" wx:for="{{infoContentList}}" wx:key="index">
<rich-text wx:if="{{item.type=='rich-text'?true:false}}" class='content' nodes="{{item.value}}">
</rich-text>
<video wx:if="{{item.type=='video' && item.value != '' ?true:false}}" src="{{item.value}}" style="width:100%;height: 150px" frameborder="0"></video>
</view>
