JS实用功能-1、JS 富文本内容img图片自适应手机端

大家好，我是“廖某某前端日志”，今天来继续为大家分享一下开发日常记录。

很多时候，在获取后端接口图文详情的富文本内容中，往往img标签中包含的图片如果图片过大，那么在手机无法达到自适应的效果，往往会溢出容器的宽度。那么这就需要我们前端来处理一下了。

问题描述： （图片溢出情况）

首先我们来思考一下，应该需要怎么做，才能让图片自适应呢？

图片要自适应，不能溢出父类宽度，可以设置图片的max-width：100%就好了。一般后端接口返回的富文本数据是字符串，那么我们直接来操作字符串的替换就好了。

JS字符串替换，利用正则匹配一下img标签，然后再String对象的replace方法处理一下就好。

let str3 = "<img src='123'/> <img src='456'/> <img src='789'/>";
let result = str3.replace(/<img/g, '<img style="max- 100%;"');
//打印输出的结果
console.log(result);

可以通过上图运行结果，其中的img标签中添加了一个style属性，并添加max-width：100% 的样式。

这样在手机端就不会出现溢出容器的情况了。

 正常情况（图片适应显示）。

以为就这样结束了吗？不，看看进度条，应该没有这么简单。

下面看看为什么有的明明已经按照上面添加max-width：100%样式，手机端显示的图片还是溢出了容器呢？

这个问题的缘由就是后端返回的富文本内容中，其中图片已经自带了属性。因为后台富文本编辑器一般都是可以自定义图片大小，位置之类的，所以相应的返回的img标签中已经带有了style属性了。

类型于下面的这种情况：

let example = '<img src="http://test.jpg" alt="活动现场" width="439" height="292" data-link="" style="margin-right: auto; margin-left: auto; border: 1px solid rgb(231, 231, 231); display: block;"/>';

用上面方法来替换这个img标签的话，那么就会出现两个style属性了，然鹅浏览器只会认后面那个，那么前面那个也就扑街了。

那这样的话，上面的方法也就不能起作用了，我们需要稍稍升级一下方法。

var formatRichText = function(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(/[^;]+;/gi, 'max-100%;').replace(/[^;]+;/gi, 'max-100%;');
    return match;
  });
  newContent = newContent.replace(/<br[^>]*/>/gi, '');
  newContent = newContent.replace(/<img/gi, '<img style="max-100%;"');  
  return newContent;
}

其实就是把img标签里面的样式属性给清除了，只保留src属性就好了，然后再替换，good！！！

输出结果如上图所示

以上两种可以解决后台富文本编辑的内容图片在移动端适配的问题。

现在自适应的问题是解决了，但我在开发的时候还遇到一个很蛋疼的问题。就是图片路径报错的问题。

 问题描述（图片无法显示）

碰到这种情况的时候，我去查看了一下后台的富文本内容。这个没有显示的图片的路径是这样的：

可以看到那个img标签中的src链接居然是个相对路径，难怪没办法显示图片。 在前后端分离开发的时候，如果前端系统没有放到后端程序的域下，这个链接是会报404的。

那么有没有解决方法呢？肯定是有的啊，最简单粗暴的就是，跟后台开发人员提，你这个图片上传的时候麻烦改成绝对链接，然后再保存到数据库。

那要我们前端改呢？其实前端改的话，也不难，就是有点费时间。至于怎么改呢？根据上面的两个方法不就同理可得了，字符串替换。good！！！

直接替换src里面的内容，但是也是需要做一下筛选的，筛选啥？富文本编辑是可以直接复制粘贴网页中的内容的，粘贴的过程中难免会把图片一起粘贴过来，所以这个图片的src路径就不是相对路径了，而是整个图片绝对路径。

所以我们需要判断一下这个图片的src属性中的链接是相对路径还是绝对路径。如果是相对路径就加上一个服务器的域名，反而呢就不操作就好了。

判断的方法很简单，用String的indexOf查找下src中是否有“http”这个字符串就好了。

现在我们再升级一下上面的方法：

var formatRichText = function(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(/[^;]+;/gi, 'max-100%;').replace(/[^;]+;/gi, 'max-100%;');
    return match;
  });
  newContent = newContent.replace(/<br[^>]*/>/gi, '');
  newContent= newContent.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function(match,capture){
    　　//capture,返回每个匹配的字符串
        if(capture.indexOf('http') == -1){
          return '<img src="https://test43.xxxxx.com/'+capture+'" alt="" />'; //相对路径添加域名
        }else{
          　　return `<img src="${capture}"`;
        }
    });
  newContent = newContent.replace(/<img/gi, '<img style="max-100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');  
  return newContent;
  }

这样的话，就可以正常显示相对路径的图片了。

输出结果上图所示。

格言：人生没有重来，每天都是现场直播！加油！