情景
GET类型的URL参数以?开始,以&分割每组类似于键值对的参数名和参数值,例如:
http://localhost:8080/test.php?user=lenconda&action=logout
针对这一个URL,我们提出要通过JavaScript取出user参数的值。
基于JavaScript的实现
我们有两种方案:1.使用传统的if和for语句进行判断;2.使用正则表达式提取想要的值。
预备知识
window.location.search
这个方法可以让我们获取到当前URL的所有参数的字符串形式,例如在本里中,使用此方法返回的值为
?user=lenconda&action=logout
substr()
此方法最多接受两个参数:m和n,m表示截取字符串的起始位置,n表示截取字符串的长度。当n省略时,默认截取到字符串末尾处。在本例中,我们要去掉“?”,所以代码应该是这样的:
window.location.search.substr(1)
现在我们就得到了如下字符串:
user=lenconda&action=logout
match()
此方法可以接受字符串或正则表达式,在使用正则表达式时,此方法会按正则表达式捕获组的顺序返回一个数组。
1.传统方法
思路
- 将参数字符串用&分割:
window.location.search.substr(1).split("&")
得到一个数组
[user=lenconda,action=logout]
- 使用for循环将这个数组的元素遍历,在遍历中将每个元素用“=”分割,得到一个新的数组,再通过if条件语句将该数组的0号元素与用户给出的参数比对,若成功则返回该数组的1号元素,否则返回undefined。
实现
function getUrlParams(search){ //声明一个函数
var searchStrs=window.location.search.substr(1).split("&"); //将原始字符串处理成数组
for (i=0;i<searchStrs.length;i++){ //使用for循环遍历数组元素
var rowStrs=searchStrs[i].split("="); //对每个元素进行分组,生成新数组
if (rowStrs[0]==search){ //进行比对
return rowStrs[1]; //匹配成功返回参数值
}else{
return undefined; //匹配失败返回undefined
}
}
}
2.基于正则表达式
思路
- 构造正则表达式
假设我们想要在字符串“user=lenconda&action=logout”中提取参数user
的值lenconda
,那我们必须先把user=lenconda
提取出来,所以我们要构造一个匹配开头是user=
的正则表达式:
(^|&)user=
这个表达式可以理解为:匹配任意以user=
开头或者以&user=
开头的字符串;
接下来,我们需要继续匹配,直到匹配完整个参数为止:
(^|&)user=([^&]*)
目前为止,这个表达式可以理解为:匹配任意以user=
开头或者以&user=
开头的,并且=
后面的所有字符都不是&
的字符串;
接下来,我们需要一个结束标志来结束这个字符串:
(^|&)user=([^&]*)($|&)
($|&)
与(^|&)
都代表两种情况:要么这个参数名/值在开头/结尾,要么就是前/后存在&
。
- 应用到match()中
var reg=new RegExp("(^|&)"+search+"=([^&]*)($|&)"); //search是函数接收的参数
Object.string.match(reg);
实现
function getUrlParams(search){
var reg = new RegExp("(^|&)"+ search +"=([^&]*)($|&)");
var rowParam = window.location.search.substr(1).match(reg);
return rowParam[2]; //在这里,因为参数值的捕获组的编号是2,所以参数值将会出现在数组的第三个位置(第一个位置是全部匹配的结果),即rowParam[2]
}
返回值如下:
["user=lenconda&", "", "lenconda", "&"]