在實際業務中， 需要對一長串的url進行解析，比如讀取、新增或修改url中的queryString。

1. 獲取url中的引數

/**
 * 獲取url內query string的值
 * @param {String} url 網址
 * @param {String} paramName queryString name
 */
 function getUrlParamByName(url, paramName) {
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
  let val = regular.exec(url);
  if (!val) {
    return null;
  }
  if (!val[2]) {
    return '';
  }
  return decodeURIComponent(val[2].replace(/\+/g, ' '));
}

示例：

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 獲取token
let token = getUrlParamByName(url, 'token');
console.log(token); // => b1d710d376498dd803e4e7a01e5932ef

2. 設定url中的引數

 說明：若當前url不存在此queryString，則進行追加操作。

/**
 * 設定url內query string的值
 * @param {String} url 網址
 * @param {String} paramName queryString name
 * @param {String} paramValue queryString value
 */
function setUrlParam(url, paramName, paramValue) {
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
  let val = regular.exec(url);
  if (val && val[2]) {
    url = url.replace(new RegExp(paramName + '=' + val[2]), `${paramName}=${paramValue}`);
  } else {
    url += `&${paramName}=${paramValue}`;
  }

  return url;
}

示例：

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 設定token
let newUrl = setUrlParam(url, 'token', '123');
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705&token=123

// 若不存在queryString，進行追加操作
newUrl = setUrlParam(url, 'dt', Date.now());
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef&dt=1669009911762

3. 清除url內指定的引數

說明：用於清除url中指定的queryString。

/**
 * 清除url內指定的param
 * @param {String} url 網址
 * @param {Array | String} paramNameList queryString name array
 */
function clearUrlParam(url, paramNameList) {
  if (!Array.isArray(paramNameList)) {
    paramNameList = [].concat(paramNameList);
  }

  paramNameList.forEach((paramName) => {
    paramName = paramName.replace(/[\[\]]/g, '\\$&');
    let regular = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
    let val = regular.exec(url);
    if (val && val[2]) {
      url = url.replace(new RegExp('&?' + paramName + '=' + val[2]), '');
    }
  });

  if (url.endsWith('?')) {
    url = url.substring(0, url.length - 1);
  }

  return url;
}

示例：

let url = 'http://wwww.baidu.com/search?userId=6453705&token=b1d710d376498dd803e4e7a01e5932ef';

// 清除token
let newUrl = clearUrlParam(url, 'token');
console.log(newUrl); // => http://wwww.baidu.com/search?userId=6453705

// 清除多個
newUrl = clearUrlParam(url, ['userId', 'token']);
console.log(newUrl); // => http://wwww.baidu.com/search