JavaScript获取URL参数值的方法

情景

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.传统方法

思路

  1. 将参数字符串用&分割:
window.location.search.substr(1).split("&")

得到一个数组

[user=lenconda,action=logout]
  1. 使用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.基于正则表达式

思路

  1. 构造正则表达式
    假设我们想要在字符串“user=lenconda&action=logout”中提取参数user的值lenconda,那我们必须先把user=lenconda提取出来,所以我们要构造一个匹配开头是user=的正则表达式:
(^|&)user=

这个表达式可以理解为:匹配任意以user=开头或者以&user=开头的字符串;
接下来,我们需要继续匹配,直到匹配完整个参数为止:

(^|&)user=([^&]*)

目前为止,这个表达式可以理解为:匹配任意以user=开头或者以&user=开头的,并且=后面的所有字符都不是&的字符串;
接下来,我们需要一个结束标志来结束这个字符串:

(^|&)user=([^&]*)($|&)

($|&)(^|&)都代表两种情况:要么这个参数名/值在开头/结尾,要么就是前/后存在&

  1. 应用到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", "&"]

将最新的文章发送到你的邮箱

展示评论