Расширенный текст апплетов WeChat

---

предисловие

В апплете используется редактор форматированного текста.Из-за ограниченного содержания форматированного текста некоторая часть содержимого форматированного текста не может быть отображена или набор текста нарушен. Взяв в качестве примера img и видео, с этим сложно справиться. Всякие многословные статьи в интернете, по сути ничем не помогут. Далее поговорим об img и видео вместе.

---

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
}

Два, обработка изображений

Говоря о различных вариантах обработки img в интернете, большинство из них прямо насильно настраивают max-width и height auto, увидев это, так и хочется пожаловаться, 'брат, ты используешь это в реальных боевых проектах'.
обработка img включает в себя три случая,
первый без стиля,
например

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

Второй стиль не содержит ширины,
например

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

Третий тип имеет стиль и имеет стиль,
например

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

Поэтому достаточно разобраться с вышеуказанными ситуациями отдельно.
Первый шаг — определить, включен ли атрибут стиля.

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

Второй шаг извлекает значение атрибута стиля.

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

Третий шаг — определить, включен ли
полный код ширины.

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 немного хлопотнее.Его можно разделить на три случая.Если стиля нет, замените его напрямую.Если стиль есть,вынесите все атрибуты стиля,а потом судите содержит ли он атрибут ширины максимальное значение.