js中获取url中查询参数的3种办法

前端中，获取url中的查询参数是我们经常遇到的问题，下面就列出3种获取查询参数的方法：

第一种:

通过正则表达式匹配参数（markdown编辑器js注释颜色太暗，故下面汉字需要加 "//"改成js注释在运行）

function regExpQuery(name){
	从索引1处开始截取，即舍弃掉"？"
	let search = location.search.substring(1)	
	
	通过正则表达式匹配，例如 ： a=10&b=70&password=90
	注意看下面的正则表达式:
		（一）、(^|&) 匹配的是开始或者是&，如上a前面的空字符开始，和b前面的&符号
		（二）、${name} 是一个模板字符串，匹配的是我们传递进来的name
		（三）、([^&]*)第二个分组指定匹配的字符不能是&的一个或多个字符，如上，匹配的是10,70,90，但是仅这样还不行，还没有结尾
		（四）、(&|$)第四个分组指定我们查询参数的结尾，是以&结尾或者是结尾，没有这个分组，我们的参数结不了尾。 比如a=10这里以&结尾，匹配到10；b=70匹配到70，以&结尾；password=90匹配到是是字符的结尾，后面没有内容，所以匹配到90
		
	let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)
	let result = search.match(reg)
	if(result == null){
		return null
	}else{
		这里之所以是索引2，是因为上面的正则表达式中我们真正要返回的查询参数值是第2对小括号中的内容，索引0处返回的是整个匹配的正则表达式对象
		return result[2]
	}
}
console.log(regExpQuery("articleId"))

二、使用新的API：

URLSearchParams（但是因为是新的api，所以有兼容性问题，要做兼容处理,可以结合上面的第一种方法做兼容）
这是mdn中关于URLSearchParams做出的解释

这里以一个字符串为例
let params = "?username=admin&password=admin123"
let usp = new URLSearchParams(params)
for(let key of usp){
	console.log(key)
	console.log(`${key[0]}=${key[1]}`)
}

得到如下的输出结果：

每一个key都是一个包含查询参数key和value的数组。

第三种:

则是使用普通的字符串操作：

function handlerQuery(name,queryStr=""){
	if(queryStr == null){
		return null
	}
	// 以？截取字符串返回一个数组，数组的第一项为？前的数据，数据第2项为？后的数据
	let query = queryStr.split("?")[1]
	let queryList = query.split("&")
	for(let key of queryList){
		// console.log(key)	//  username=admin    password=admin123
		if(key.split("=")[0] === name){
			return key.split("=")[1]
		}		
	}
}
handlerQuery("password","?username=admin&password=admin123456&email=121367@163.com")

输出结果如下：

以上就是获取url查询参数的其中3种方法了，相比较之下：

第一种方法的核心是正则表达式，通过正则表达式匹配参数，比较推荐
第二种方法简单，但是URLSearchParams这个api有兼容性问题
第三种方法就是通过str.split()方法通过 ?,&，=做3次字符串的截取，最后通过和我们要获取的参数进行比较，相等就返回对应的数据；