获取地址栏中的参数

笔记参考：菜鸟教程

获取地址栏中的参数（?key=value)。
例如：从地址栏（http://www.baidu.com?word=china&a=1）中获取参数“word”的值“china”。

案例

function getUrlParam(name){
     let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     let r = window.location.search.substr(1).match(reg);
     if(r!=null)return  decodeURI(r[2]); return '';
}

//注释版：
function getUrlParam2(name){
     let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     // let r = window.location.search.substr(1).match(reg);//地址栏 参数部分
     let r = 'key=value&key2=value2&key3=value3'.match(reg);//模拟地址栏参数
     console.log(JSON.stringify(r));//["&key2=value2&","&","value2","&"]
     if(r!=null)return  decodeURI(r[2]); return '';
}

console.log(getUrlParam2('key2'))//value2

分析

对象/函数部分分析：

• window.location 对象用于获得当前页面的地址 (URL)

• location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）

• substr()

  • 返回一个从指定位置开始的指定长度的子字符串
  • 这里设置一个参数1，代表从索引为1的地方开始截取到最后，是为了把url中的?号去掉

• decodeURI，uri解码，有一些参数值会经过uri编码的，所以保险起见应该进行解码（因为value值中不能包括&，若包括&则需要进行uri编码）

正则表达式部分分析：

• ^，有限定开头、取反（否）的意思。一般在中括号”[]”中使用表示否定（取反）。

• (^|&)

  • ^这里表示任意字符,&就是&字符
  • 匹配任意字符或者&字符

• ([^&]*)

  • ^这里表示取反（有[]与没[]的区别）。[^&]表示匹配不包含&的其他字符， *表示可以重复0或N次
  • 匹配非&字符0或N次

• (&|$)

  • 匹配&字符或$字符

• RegExp对象

  • 若要全局匹配，可添加第二个参数 ‘g’
  • 符合匹配规则 “(^|&)”+ name +“=([^&]*)(&|$)” 的作为匹配结果返回
  • ()部分也作为匹配结果返回
  • 所以，上边的例子中若有匹配到会返回四个匹配结果，一个包含四个元素的数组（没有匹配到会返回null）。
  • [“整个匹配结果”,“第一个()部分的匹配结果”,“第二个()部分的匹配结果”,“第三个()部分的匹配结果”]

//为了解释匹配规则中()的作用，对getUrlParam函数做如下修改：
//可以看到：匹配规则中没有()时，只返回一个匹配结果
let getUrlParam = function(name) {
	let reg1 = new RegExp(name + "=[^&]*");
	let r = 'key=value&key2=value2&key3=value3'.match(reg1); //模拟地址栏参数
	console.log(JSON.stringify(r)); //["key2=value2"]  只返回一个匹配结果
	let reg2 = new RegExp("=[^]*");
	r = r[0].match(reg2);
	console.log(JSON.stringify(r)); //["=value2"]
	if (r != null) return decodeURI(r[0].substr(1, r[0].length - 1));
	return ''; //value2
}

console.log(getUrlParam('key2')) //value2

扩展

不使用正则表达式来实现。

function getUrlParam2(name){
     // let url = window.location.search.substr(1);
     let url = 'key=value&key2=value2&key3=value3';
     let allVal = url.split('&');//分割，得到键值对数组
     let str = allVal.filter(item => item.includes(name)).toString();//遍历，返回包含name的键值对
     return decodeURI(str.split('=')[1]);//分割，返回value（key=value）
}

console.log(getUrlParam2('key2'))//value2