移动端&小程序处理后端返回的html富文本中图片适应屏幕

1 export function handleHtmlImg(string) {
2   var richtext = string;
3   const regex = new RegExp("<img", "gi");
4   if (richtext != null) {
5     richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
6   }
7   return richtext
8 }

结果发现有些富文本内图片自带行内样式于是得先清除富文本中自带的样式，再添加max-width:

export function handleHtmlImg(html) {
  // 先手动清除所有img自带的样式，再手动添加max-width
  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%;"');
  return newContent;
}

标签：function,程序处理,newContent,replace,width,html,match,文本,gi
来源： https://www.cnblogs.com/zxf906/p/16253781.html