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

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

最后通过正则匹配替换后 图片可以了视频还是不行,看了微信小程序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;
    },

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

相关推荐
kaixin_啊啊8 小时前
突破限制:Melody远程音频管理新体验
音视频
2501_915918418 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
ai产品老杨9 小时前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker9 小时前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie9 小时前
Android音频学习(十八)——混音流程
学习·音视频
00后程序员张10 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差19 小时前
《赛事报名系统小程序》
小程序·html·uniapp
清风66666620 小时前
基于STM32的APP遥控视频水泵小车设计
stm32·单片机·mongodb·毕业设计·音视频·课程设计
00后程序员张20 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
Cary丿Xin21 小时前
Luma 视频生成 API 对接说明
音视频