引言

开发一套系统，前端官网使用v-html解析时能解析出其中的video标签，在页面上正常展示。但是使用uniapp的时候无法解析出来

原因

uniapp底层是封装的小程序技术。使用开发者工具观察，代码

<view class="content" style="padding: 0 4vw;" v-html="content"></view>

在微信开发者工具中现实的标签是<rich-text>，是解析富文本，如下图所示，其中带有video标签，但是并没有在页面展示出来

解析展示图.png

解决方法

将video标签拆分出来，将整个富文本内容拆分成数组依次渲染

<view class="content" v-for="(item, index) in needArticleList" :key="index">
    <view v-if="item.type=='rich-text'" v-html="item.value" class='content'></view>
    <video v-if="item.type=='video' && item.value" :src="item.value"
            style="width:100%;height: 150px" frameborder="0"></video>
</view>

获取video标签，拆分成数组，传入富文本内容解析即可

// 富文本视频解析
            getVideo(data) {
                let videoList = [];
                let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
                let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
                let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
                let articleList = data.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]
                    })
                  }
                })
                return needArticleList
             },