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

本文主要是介绍移动端&小程序处理后端返回的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;
}

这篇关于移动端&小程序处理后端返回的html富文本中图片适应屏幕的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！