小程序 rich-text 富文本回显 解决video节点不显示问题
Posted 北方的刀郎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序 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 }" οncοntextmenu="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 }" οncοntextmenu="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=" 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]
})
}
})
this.setData({
'list':needArticleList ,
})
得到 needArticleList 为 常用标签与 video 的组合数组
在 wxml 中渲染使用 如下 样式再根据自己的进行微调就行 👌
<view class="infoContentStyle" wx:for="{{needArticleList }}" 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>
以上是关于小程序 rich-text 富文本回显 解决video节点不显示问题的主要内容，如果未能解决你的问题，请参考以下文章