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

小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配
富文本图片自适应的问题
当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致

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

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

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

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

<p>
    随便的文字
</p>
<p>
    <img src="https://weiqing.kuxia.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p>
    <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>
<p style="white-space: normal;">
    随便的文字
</p>
<p style="white-space: normal;">
    <img src="https://xxx.xxx.top/uploads/20220720/0fa5869614f227c88c7c89737836814c.png" title="" alt=""/>
</p>
<p style="white-space: normal;">
    <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>
<p>
    <br/>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

这是我随便打的，视频链接也更改了（项目保密），结构上每一个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;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

最后的结果（数组）：

0: {type: "text", content: "<p>随便的文字</p>"}
1: {type: "text", content: "<p><img style="max-width:100%;height:auto" src="ht…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
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: "<p style="white-space: normal;">随便的文字</p>"}
5: {type: "text", content: "<p style="white-space: normal;"><img style="max-wi…f227c88c7c89737836814c.png" title="" alt=""/></p>"}
6: {type: "text", content: "<p style="white-space: normal;">"}
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: "<p></p>"}
1
2
3
4
5
6
7
8
9
10

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

<!-- config.remark是最后的数据，也就是上面的数组 -->
<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>
1
2
3
4
5