微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本_微信小程序 rich-text 视频_苦夏木禾

irpas 02-07 7414

小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配

富文本图片自适应的问题

当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致

//richtext为富文本 let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"') //图片自适应

如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将 标签替换掉

//richtext为后端传过来的富文本 dealRichText(richtext) { let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, ''); return content; } 渲染视频

网上也有不少方法，但是我的富文本是用百度富文本编辑器生成的，有些复杂，是这样的：

随便的文字 <img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/> <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}"> <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/> </video> <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}"> <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/> </video> 随便的文字 <img src="https://xxx.xxx.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/> <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}"> <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/> </video> <video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" data-setup="{}"> <source src="https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4" type="video/mp4"/> </video>

这是我随便打的，视频链接也更改了（项目保密），结构上每一个p标签是一个段落，视频可能在一个段落中存在多个，处理方案：

1、处理 dealRichText(richtext) { let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, ''); // 替换图片宽高 let textArr = content.split(/<p/); //按照段落分割字符串 let contentArr = []; // 防止一段多个视频，进行切割 textArr.forEach(val => { let arr = val.split(/<video/) contentArr.push(...arr) }) let newArr = []; //处理后的数组 contentArr.forEach((val, i) => { if (val != '' && val != ">") { //防止为空字符串 let matchResult = val.match(/(?<= class=\"edui-upload-video).+(?=\<\/video\>)/); //匹配字符串中是否有视频 if (matchResult) { let a = matchResult[0].match(/(?<=src=\").+(?=\" data)/); //匹配视频链接 newArr.push({ type: 'video', content: a[0] }) } else { newArr.push({ type: 'text', content: "<p" + val }) } } }) return newArr; },

最后的结果（数组）：

0: {type: "text", content: "随便的文字"} 1: {type: "text", content: "<img style="max-width:100%;height:auto" src="ht…f227c88c7c89737836814c.png" title="" alt=""/>"} 2: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"} 3: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"} 4: {type: "text", content: "随便的文字"} 5: {type: "text", content: "<img style="max-wi…f227c88c7c89737836814c.png" title="" alt=""/>"} 6: {type: "text", content: ""} 7: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"} 8: {type: "video", content: "https://xxx.xxx.top/uploads/20220720/888a8ab9fdafa65bca08375fb4f6fb1f.mp4"} 9: {type: "text", content: ""}

数据上还是有点小瑕疵的，不过不影响使用了

2、渲染  <view wx:for="{{config.remark}}" wx:key="index"> <rich-text nodes="{{item.content}}" wx:if="{{item.type == 'text'}}"></rich-text> <video src="{{item.content}}" wx:if="{{item.type == 'video'}}" style="width: 100%;" controls></video> </view>