Wechat applet does not use plug-ins, rendering videos in rich text, image adaptation, plus version

Applet native rich-text Rendering video is not supported , So it needs to be displayed after processing , It mainly uses string cutting and matching

The problem of rich text image adaptation

When we get rich text data from the backend , We make use of replace Method to modify the style of the picture , Make sure the picture is consistent with the width of the phone

//richtext Is rich text 
let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   // Picture adaptation 

If there are inexplicable blank areas in rich text , It may be that the rich text contains a newline label , We will <br> Label replaced

//richtext For the rich text passed from the back end 
dealRichText(richtext) {
    
	let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, '');
	return content;
}

Rendering video

There are also many ways online , But my rich text is generated by Baidu rich text editor , It's a little complicated , That's true ：

<p>
     Casual words 
</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;">
     Casual words 
</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>

This is my casual call , The video link has also changed （ Project confidentiality ）, Structurally, each p A tag is a paragraph , There may be multiple videos in a paragraph , Treatment scheme ：

1、 Handle

dealRichText(richtext) {
    
    let content = richtext.replace(/<img/gi, '<img style="max-width:100%;height:auto"').replace(/<br\/>/g, ''); //  Replace the width and height of the picture 
    let textArr = content.split(/<p/); // Split the string by paragraph 
    let contentArr = [];
    //  Prevent one or more videos , For cutting 
    textArr.forEach(val => {
    
        let arr = val.split(/<video/)
        contentArr.push(...arr)
    })
    let newArr = []; // Processed array 
    contentArr.forEach((val, i) => {
    
        if (val != '' && val != ">") {
     // Prevent empty strings 
            let matchResult = val.match(/(?<= class=\"edui-upload-video).+(?=\<\/video\>)/); // Whether there is video in the matching string 
            if (matchResult) {
    
                let a = matchResult[0].match(/(?<=src=\").+(?=\" data)/); // Match video links 
                newArr.push({
    
                    type: 'video',
                    content: a[0]
                })
            } else {
    
                newArr.push({
    
                    type: 'text',
                    content: "<p" + val
                })
            }
        }
    })
    return newArr;
},

The final result （ Array ）：

0: {
    type: "text", content: "<p> Casual words </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;"> Casual words </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>"}

There are still some minor flaws in the data , But it doesn't affect the use

2、 Rendering

<!-- config.remark It's the last data , That is, the array above  -->
<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>