js工具函數

js工具函數

原創

2020-02-21 15:19

1. 解析 URL Params 爲對象

function parseParam(url) {
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 將 ? 後面的字符串取出來
  const paramsArr = paramsStr.split('&'); // 將字符串以 & 分割後存到數組中
  let paramsObj = {};
  // 將 params 存到對象中
  paramsArr.forEach(param => {
    if (/=/.test(param)) { // 處理有 value 的參數
      let [key, val] = param.split('='); // 分割 key 和 value
      val = decodeURIComponent(val); // 解碼
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判斷是否轉爲數字

      if (paramsObj.hasOwnProperty(key)) { // 如果對象有 key，則添加一個值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else { // 如果對象沒有這個 key，創建 key 並設置值
        paramsObj[key] = val;
      }
    } else { // 處理沒有 value 的參數
      paramsObj[param] = true;
    }
  })

  return paramsObj;
}

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 結果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重複出現的 key 要組裝成數組，能被轉成數字的就轉成數字類型
  city: '北京', // 中文需解碼
  enabled: true, // 未指定值得 key 約定爲 true
}
*/

2. 字符串轉義（防篡改）

const escapeMap = {
  //'&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;'
};

function escape(string = '') {
  const reg = new RegExp(`[${Object.keys(escapeMap).join('')}]`, 'g');
  return string.replace(reg, item => escapeMap[item]);
}

防止用戶輸入惡意篡改，JSX 對這種情況不用處理，字符串就是字符串，不會被識別爲html。