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-width: 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(/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;
}

其實就是把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(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width: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-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');  
  return newContent;
  }

這樣的話，就可以正常顯示相對路徑的圖片了。

 

輸出結果上圖所示。

格言：人生沒有重來，每天都是現場直播！加油！