javascript的encodeURIComponent

本系列文章是本人學習相關知識時所積累的筆記，以記錄自己的學習曆程，也為了友善回顧知識；故文章内容較為随意簡練，抱着學習目的來的同學務必轉移他處，以免我誤人子弟~

參考資料：

MDN：encodeURIComponent

工作中碰到問題：

某個元素的 background-image 的值 url() 中的值是經過 encodeURIComponent 處理的圖檔路徑；如果圖檔路徑中包含着英文括号

()

則 encodeURIComponent 無法将英文括号轉義，即

好123(2).jpg

隻能變成

%E5%A5%BD123(2).jpg

問題就在于這樣的話圖檔路徑被當成非法的，導緻圖檔無法在浏覽器中顯示

檢視了 MDN 文檔才知道，encodeURIComponent 會忽略

字母、數字、(、)、.、!、~、*、'、-和_

，是以給出一個較為安全的辦法：

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}
           

手動轉義，使用到項目中可以解決問題

注：，圖檔存放在cdn上，屬于http請求，可能跟background-image的url加載圖檔的方式有關