使用正则表达式获取url
温故而知新,先上一下我们常规使用正则表达式
去获取url参数的代码
function getParams(url, params){
var res = new RegExp("(?:&|/?)" + params + "=([^&$]+)").exec(url);
return res ? res[1] : '';
}
// url: xx.com?id=2&isShare=true
const id = getParams(window.location.search, 'id')
console.log(id) // 2
复制代码
然而,现在再也不用正则这么复杂去获取浏览器的查询参数啦,浏览器给我们直接提供了一个URLSearchParams
接口,让我们可以对查询参数有很大的操作空间,而且比起之前使用正则,更加简洁直接
关于URLSearchParams方法
代码实现
首先把怎样使用URLSearchParams方法实现获取url参数的代码呈上
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log(params) // {id: '2', isShare: 'true'}
console.log(params.id) // 2
复制代码
是不是超级简单,只需要以url作为参数传入,并且创建URLSearchParams
的一个实例对象,然后调用entries()
这个方法,返回一个迭代协议iterator,该协议支持可以遍历所有支持健/值对的列表
此时还需要通过Object.fromEntries()
这个方法去把该健/值对的列表获取到,然后我们就可以愉快地使用获取到的参数啦。
如果是不需要兼容IE的项目,可以放心食用。