t-comm/es/url/format-url-params.mjs

专业、稳定、纯粹的工具库

/**
 * 根据传入的参数，移除原来的所有参数，根据传入的 keepParamsObj 进行重新拼接地址，以 hash 模式返回
 * @param {string} url 地址
 * @param {object} keepParamsObj 参数对象
 * @returns 只有传入参数的地址
 * @example
 * // 地址是 hash 模式参数
 * formatUrlParams('http://www.test.com/#/detail?a=1&b=2&c=3', { d: 4 });
 * // => 'http://www.test.com/#/detail?d=4'
 * @example
 * // 地址 history 模式参数并存（默认仍以 hash 模式返回）
 * formatUrlParams('http://www.test.com?a=1&b=2&c=3', { d: 4 });
 * // => 'http://www.test.com/?d=4'
 * @example
 * // hash 模式和 history 模式参数并存
 * formatUrlParams('http://www.test.com?a=1&b=2&c=3#/detail?d=4', { e: 5 });
 * // => 'http://www.test.com/#/detail?e=5'
 * @example
 * // 地址是 hash 模式和 history 模式参数并存，且是多个参数
 * formatUrlParams('http://www.test.com?d=4&f=6#/detail?a=1&b=2&c=3', { e: 5, g: 7 });
 * // => 'http://www.test.com/#/detail?e=5&g=7'
 * @example
 * // 子工程是 history 模式（forceHistoryMode = true）
 * formatUrlParams('http://www.test.com?a=1&b=2&c=3', { d: 4 }, true);
 * // => 'http://www.test.com/?d=4'
 */
function formatUrlParams() {
  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var keepParamsObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var forceHistoryMode = arguments.length > 2 ? arguments[2] : undefined;
  // 参数校验
  var keepKeyArr = Object.keys(keepParamsObj);
  if (!url) {
    return url;
  }
  // 转换地址参数为字符串
  var paramsStr = keepKeyArr.reduce(function (str, key) {
    var value = keepParamsObj[key];
    var item = "".concat(key, "=").concat(value);
    if (str !== '') {
      return "".concat(str, "&").concat(item);
    }
    return item;
  }, '');
  // 通过 HTMLAnchorElement 规范链接格式
  var anchorElement = document.createElement('a') || {};
  anchorElement.href = url;
  var _anchorElement$origin = anchorElement.origin,
    origin = _anchorElement$origin === void 0 ? '' : _anchorElement$origin,
    _anchorElement$pathna = anchorElement.pathname,
    pathname = _anchorElement$pathna === void 0 ? '' : _anchorElement$pathna,
    _anchorElement$hash = anchorElement.hash,
    hash = _anchorElement$hash === void 0 ? '' : _anchorElement$hash;
  if (!origin) {
    return url;
  }
  // 获取 router 的目标 path
  var matchRes = hash.match(/^#([^?]*)/);
  var routeName = matchRes === null || matchRes === void 0 ? void 0 : matchRes[1];
  // 重新拼接链接，判断采用 history 或 hash 模式返回
  var routerPath = '';
  // hash 模式拼上
  if (!forceHistoryMode) {
    var isHistory = url.includes('?') && !url.includes('#');
    // forceHistoryMode未传的history模式，默认加上hash
    if (!(forceHistoryMode !== false && isHistory)) {
      routerPath = "#".concat(routeName || '/');
    }
  }
  var formatUrl = "".concat(origin).concat(pathname).concat(routerPath, "?").concat(paramsStr);
  return formatUrl;
}

export { formatUrlParams };