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

这篇具有很好参考价值的文章主要介绍了微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

富文本图片自适应的问题

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

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

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

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

渲染视频

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

<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>

这是我随便打的，视频链接也更改了（项目保密），结构上每一个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: "<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>"}

数据上还是有点小瑕疵的，不过不影响使用了文章来源地址https://www.toymoban.com/news/detail-432604.html

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>