Rich text of WeChat applets

---

foreword

The rich text editor is used in the applet. Due to the limited rich-text content, some rich text content cannot be rendered or the typesetting is disordered. Taking img and video as an example, it is a headache to deal with. All kinds of long-winded articles on the Internet, in fact, there is no help. Next, let's talk about img and video together.

---

1. Video processing

Because rich-text does not recognize video, the applet cannot render it. Many online videos are processed by downloading plug-ins. If it is a single video, I personally think that it can be matched with regular expressions. If it is rich text with other content interspersed, you can try plug-ins. Our recent requirement is to take out the video in the rich text and render it separately.
Then let's take a look at how to deal with separate rendering.
Here is part of the core code and not the complete case code

let htmlStr = '<p>测试题目解析的东西</p>↵<p><video controls="controls" width="300" height="150">↵<source src="https://scsf.oss-cn-shanghai.aliyuncs.com/tk/4d896a6e-f467-4a6d-bbc0-e30b5135db2f/bg.mp4" type="video/mp4"></video></p>'
let videoList = formatVideo(htmlStr )
const formatVideo = (htmlStr )=>{
    
    
  if (!htmlStr ) return []
  let srcReg = /(?<=(source[^>]src="))[^"]*/g
  let videoList = htmlStr.match(srcReg) || []
  return videoList
}

Two, img processing

Speaking of the various versions of img processing on the Internet, most of them are directly violently setting max-width and height auto; after seeing it, I just want to complain, 'brother, are you using this in actual combat projects'.
img processing includes three cases,
the first without style,
for example

let htmlStr = '<img src="...." />'

The second style does not contain width,
for example

let htmlStr = '<img style="text-align:center" src="...."'

The third type has style and has style,
for example

let htmlStr = '<img style="width:100px;height:30px;" src="...." />'

Therefore, it is enough to deal with the above situations separately.
The first step is to determine whether the style attribute is included

 let regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')

The second step takes out the style attribute value.

let srcReg = /(?<=(<img[^>]style="))[^"]*/g

The third step is to judge whether
the complete code of width is included

const formatRichTextInfo = (str, width) => {
    
    
  var regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')
  let result = ''
  if (regExp.test(str)) {
    
    
    result = str.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
  } else {
    
    
    let srcReg = /(?<=(<img[^>]style="))[^"]*/g
    let attributeList = str.match(srcReg) || []
    if (attributeList && attributeList .length) {
    
    
      if (attributeList [0].indexOf('width') != -1) {
    
    
        result = str.replace(
          /(<img[^>]*style="[^"]*?)(\bwidth\s*:\s*\d+[^;"]*?px;)(\s?height\s*:\s*\d+[^;"]*?px;)([^<]*\/>)/gi,
          function (match, p1, p2, p3, p4) {
    
    
            var widthValue = parseInt(p2.match(/\d+/)[0])
            // var heightValue = parseInt(p3.match(/\d+/)[0])
            if (widthValue > width) {
    
    
              return p1 + `width: ${
      
      width}px; height: auto;` + p4
            }
            return match // 如果width小于等于375，则不做替换，保持原样
          }
        )
      } else {
    
    
        result = str.replace(/<img[^>]*>/gi, function (match, capture) {
    
    
          match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
          return match
        })
        result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
        result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      }
    } else {
    
    
      result = str.replace(/<img[^>]*>/gi, function (match, capture) {
    
    
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
        return match
      })
      //再设置新的样式
      result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
    }
  }
  return result
}

Summarize

Both video and img are processed using regular patterns.
img is a little more troublesome. It can be divided into three cases. If there is no style, replace it directly. If there is style, take out all the style attributes, and then judge whether it contains the width attribute. maximum value.