常见笔试题：JS 获取 URL 参数

类似的题目，笔试中遇到两次了，每次都觉得很简单，经常忘记url格式，写起来磕磕绊绊的，痛定思痛，写篇文章整理下！

URL 基本知识

URL，统一资源定位符（英语：Uniform Resource Locator，缩写：URL，或称统一资源定位器、定位地址、URL地址）俗称网页地址，简称网址，是因特网上标准的资源的地址（Address），如同在网络上的门牌。—— 维基百科

以“https://zh.wikipedia.org:443/w/index.php?title=随机页面”为例，其中：

1. https，是协议；
2. zh.wikipedia.org，是服务器；
3. 443，是服务器上的网络端口号；
4. /w/index.php，是路径；
5. ?title=Special:随机页面，是询问 query

query 参数
GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开key与value

window.location

js获取url参数值

获取query

两种方法：1）url入参；2）window.location.search 获得以"?"开头的query;

function getQuery(url) {
  if (url) {
    if (!url.includes('?')) { return null }
    const startIndex = url.indexOf('?')
    const endIndex = url.includes('#') ? url.indexOf('#') : undefined
    return url.slice(startIndex + 1, endIndex)
  }
  return window.location.search.substring(1) || null
}

2 个常用的场景示例：1）获取所有参数； 2） 获取单个参数；
2 种方法：1）split 拆分法；2）正则表达式；

方法一：split 拆分法，获取所有参数

function getQueryObj(url) {
  const obj = {}
  const query = getQuery(url)
  if(!query) {return obj}
  
  query.split('&').forEach(q => {
    const key = q.split('=')[0]
    const value = q.split('=')[1]
    obj[key] = value
  })
  return obj
}

方法二：正则，获取单个参数

function getQueryString(key, url) {
  const query = getQuery(url)
  if (!query) { return null }
  let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
  let r = query.match(reg);
  if (r != null) {
    return decodeURIComponent(r[2]); // 解码
  };
  return null;
}

(^|&) 这里匹配开头或者&开头的字符串
([^&]*) 不包含&的零个或多个字符
(&|$) 后面是&或者结尾的字符串，如"&ad"，"ad"
i 大小写不敏感

补充

关于URL编码和 decodeURIComponent：segmentfault.com/a/119000001…
js正则表达式-菜鸟教程：www.runoob.com/jsref/jsref…