小程序 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>