【Js】获取地址栏参数（超简单）

1、Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

2、为什么 window.location.search 为空?

答：注意search和hash的区别，
如果URL中“?”之前有一个“#”比如：“http://localhost:63342/index.html#/version?type=35&id=5”，
那么使用window.location.search得到的就是空（“”）。
因为“?type=35&id=5”是属于“#/version?type=35&id=5”这个串字符的，
也就是说查询字符串search只能在取到“?”后面和“#”之前这个区间的内容，如果“#”之前没有“?”，search取值为空。

3、采用正则表达式获取地址栏参数:

function getUrlSearch(name) {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;

  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;

  return r[2];
}

// 调用方法
getUrlSearch("参数名");

// 举例1:若地址栏URL为：abc.html?id=123&name=池子&url=http://www.baidu.com
console.log('地址栏参数id',getUrlSearch("id"));
console.log('地址栏参数name',getUrlSearch("name"));
console.log('地址栏参数url',getUrlSearch("ursl"));
// 123
// 池子(不解码此处是乱码)
// null


// 举例2:若地址栏URL为：abc.html
console.log('地址栏参数id',getUrlSearch("id"));
// null