微信小程序 rich-text 富文本中圖片自適應

如果文本中的圖片只有<img src="">那么可以直接替換，但是如果有其他的樣式比如width,height,style時就需要先去掉其，再替換

方法如下：

/**
 * 處理富文本里的圖片寬度自適應
 * 1.去掉img標簽里的style、width、height屬性
 * 2.img標簽添加style屬性：max-width:100%;height:auto
 * 3.修改所有style里的width屬性為max-width:100%
 * 4.去掉<br/>標簽
 * @param html
 * @returns {void|string|*}
 */
function formatRichText(html){
  let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
      match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
      return match;
  });
  newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
      match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
      return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');
  return newContent;
}


// 模塊出口
module.exports = {
  formatRichText,
};

轉載於：https://www.cnblogs.com/lovelh/p/12747497.html