WeChat アプレットのリッチ テキスト

---

序文

アプレットではリッチ テキスト エディタが使用されていますが、リッチ テキスト コンテンツが限られているため、一部のリッチ テキスト コンテンツが表示されなかったり、組版が乱れたりすることがあります。画像とビデオを例に挙げると、これに対処するのは頭の痛い問題です。インターネット上のあらゆる種類の長文記事は、実際のところ、救いがありません。次に、img と video について一緒に話しましょう。

---

1. ビデオ処理

リッチテキストはビデオを認識しないため、アプレットはビデオをレンダリングできません。オンライン動画の多くはプラグインをダウンロードして処理されていますが、単体の動画であれば正規表現で照合できると個人的には思いますし、他のコンテンツが散りばめられたリッチテキストであればプラグインを試してみるのも良いと思います。最近の要望は、ビデオをリッチ テキストで取り出して個別にレンダリングすることです。
次に、個別のレンダリングに対処する方法を見てみましょう。
これはコアコードの一部であり、完全なケースコードではありません

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
}

2、画像処理

インターネット上にあるさまざまなバージョンの img 処理について言えば、そのほとんどが max-width と height auto を直接的に乱暴に設定しており、それを見ると、「お兄さん、これを実戦プロジェクトで使っているのですか」と文句を言いたくなります。
img 処理には 3 つのケースが含まれます。
最初のケースはスタイルなしです。
たとえば、

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

2 番目のスタイルには幅が含まれていません。
たとえば、

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

3 番目のタイプにはスタイルがあり、スタイルもあります。
たとえば、

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

したがって、上記の状況に個別に対処するだけで十分です。
最初のステップは、style 属性が含まれているかどうかを判断することです。

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

2 番目のステップでは、style 属性値を取り出します。

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

3番目のステップは、幅
の完全なコードが含まれているかどうかを判断することです。

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
}

要約する

ビデオと画像は両方とも規則的なパターンを使用して処理されます。
imgの場合は少し面倒で、styleが無い場合は直接置き換える場合とstyleがある場合はstyle属性を全て取り出してwidth属性が含まれているかどうかを判定する場合の3つに分けられます。