编程题：实现一个解析URL参数的方法｜刷题打卡

题目要求

实现一个自定义方法，解析URL中的参数，即返回最终的query string对象即可。

举个例子：

输入：

const url = 'http://sample.com/?a=1&b=2&c=xx&d=2#hash';

输出：

// 拆解URL参数中queryString，返回一个 key - value 形式的 object
const result = { a: '1', b: '2', c: 'xx', d: '' };

实现

方法一

第一种方法主要是利用字符串分割和数组操作，拿到关键的字符串，再做一下类型转换，组成最终的结果。主要技术点是要熟悉String和Array的相关API，灵活运用。

const getUrlParams = (url) => {
  const arrSearch = url.split('?').pop().split('#').shift().split('&');
  let obj = {};
  arrSearch.forEach((item) => {
    const [k, v] = item.split('=');
    obj[k] = v;
    return obj;
  });
  return obj;
};

方法二

第二种方法利用了 Web API 提供的 URL 和 URLSearchParams 对象实现的，用起来非常简单，缺点是兼容性不是很完美，不兼容IE系列浏览器。

const getUrlParams2 = (url) => {
  const u = new URL(url);
  const s = new URLSearchParams(u.search);
  const obj = {};
  s.forEach((v, k) => (obj[k] = v));
  return obj;
};

方法三

第三种方法通过正则表达式（捕获组，匹配不在集合中的字符）解析标准的query-string键值对字符串，然后巧妙地利用 string.replace方法的第二个参数可以作为回调函数进行一些操作，得到最终结果，写起来是最简洁的，但是写正则真的是头疼。

const getUrlParams3 = (url) => {
  // 定义一个 parse url.search 的方法
  function parse(url) {
    const obj = {};
    url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (obj[k] = v));
    return obj;
  }
  url = url.split('#').shift();
  return parse(url);
};

测试代码

测试一下

function test() {
  const url = 'http://sample.com/?a=1&b=2&c=xx&d=2#hash';
  // const res = getUrlParams(url);
  // const res = getUrlParams2(url);
  const res = getUrlParams3(url);
  console.log(res);
}

test();