小程序中展示富文本 图片不适配？视频不显示？

最近遇到一个问题在小程序中渲染富文本的内容，如果里面有图片和视频，渲染的时候图片大小超屏幕了，而视频完全没有显示！！！

最后通过正则匹配替换后 图片可以了视频还是不行，看了微信小程序api官网才知道不支持视频渲染，那怎么办呢？

最终方法：

    formatRichText(html) { //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
        return match;
      });
      newContent = newContent.replaceAll('style=""', '');
      // newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      //处理图片
      // newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;width:100%;height:auto;vertical-align: middle;"');
      //处理媒体
      //获取视频的地址
      const videoRegex = /<div data-w-e-type="video"[^>]*>[\s\S]*?<\/div>/gi;
      const regexSrc = /src="([^"]+)"/
      const videoItem = newContent.match(videoRegex);
      if (videoItem.length > 0) {
        for (let i = 0; i < videoItem.length; i++) {
          let src = videoItem[i].match(regexSrc);
          this.detailsMedia.push({url: src[1], type: 'video'})
        }
      }
      newContent = newContent.replace(videoRegex, '')
      //获取图片地址
      const imgRegex = /<img[^>]*\s+src="([^"]+)"[^>]*>/gi
      const imgItem = newContent.match(imgRegex);
      if (imgItem.length > 0) {
        for (let i = 0; i < imgItem.length; i++) {
          let src = imgItem[i].match(regexSrc);
          this.detailsMedia.push({url: src[1], type: 'image'})
        }
      }
      newContent = newContent.replace(imgRegex, '')
      // 获取富文本文本
      // 正则表达式  全局匹配 table tr td标签，并给各自标签添加class类名
      newContent = newContent.replace(/<table/g, '<table class="table" style="width:100%;"')
      newContent = newContent.replace(/<tr/g, '<tr class="tr" style="display: table-row;"')
      newContent = newContent.replace(/<td/g, '<td class="td" style="display: table-cell;text-align: left;"')
      newContent = newContent.replace(/<ol/g, '<ol class="ol" style="text-align: left;padding-left:20rpx;margin:0;"')
      return newContent;
    },

通过提取地址，我自己渲染~哈哈哈