大家好，我是“廖某某前端日誌”，今天來繼續為大家分享一下開發日常記錄。

很多時候，在獲取後端介面圖文詳情的富文字內容中，往往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;
  }

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

輸出結果上圖所示。

總結：本篇主要講解了富文字圖片在手機端顯示問題的處理方法，包括圖片溢位父類容器的問題和圖片相對路徑不顯示的問題。

最後，人生沒有重來，明天都是現場直播！加油！