js获取URL参数
原创
js获取地址栏的字段参数和字段值，通过js函数获取
例如：
https://test.com/?name=roger
https://test.com/hello?name=roger在本例中，我们有一个名为name的查询参数，其值为roger。
你可以有多个参数，像这样:
https://test.com/hello?name=roger&age=20&aa=bb&cc=123要在浏览器内访问查询的值，使用JavaScript，我们有一个特殊的API，称为URLSearchParam，它受到所有现代浏览器的支持：
我们可以这样使用：
const params = new URLSearchParams(window.location.search)注意:不要将完整的URL作为参数传递给URLSearchParams()，而只传递URL的查询字符串部分，您可以使用window.location.search访问该部分。
在这个例子中：
https://test.com/hello?name=rogerwindow.location.search等于字符串?name=roger。
现在我们拥有params对象后，我们就可以访问他了。
检查一个值：
params.has('test')获取一个值：
params.get('test')你也可以使用for…of…遍历所有的查询参数。
const params = new URLSearchParams(window.location.search)
for (const param of params) {
console.log(param)
}查询参数可能有多个相同的key。
在本例中，我们多次传递相同的参数名，如下所示:
https://test.com/hello?name=roger&name=flavio我们无法检测参数是否被多次传递。如果我们使用parms .get(‘name’)，我们将只返回第一个值。
我们可以使用parms . getall (‘name’)来返回一个包含传递的所有值的数组。
除了has()、get()和getAll()之外，URLSearchParams API还提供了一些其他的方法，我们可以使用它们来遍历参数:
- forEach()迭代参数
- entries()返回一个包含参数key/values的迭代器
- keys()返回包含参数键的迭代器
- values()返回一个包含参数值的迭代器
其他改变参数的方法，在页面中运行的其他JavaScript中使用(它们不改变URL):
- append()向对象追加一个新参数
- delete()删除现有参数
- set()设置参数的值
我们可以使用sort()对参数进行键值排序，并使用toString()方法从这些值生成查询字符串。
我们可以使用append() / set() / delete()来编辑查询字符串，并使用toString()生成一个新的查询字符串。
还有一种方法是使用正则匹配提取（简单高效）：
function getQueryStr(name) {
??? var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
??? var r = window.location.search.substr(1).match(reg);
??? if (r != null) {
??????? return unescape(r[2]);
??? }
??? return null;
}
// 这样调用：
alert(GetQueryStr("参数名1"));
alert(GetQueryStr("参数名2"));
alert(GetQueryStr("参数名3"));第二种正则提取：
function getQueryString() {
var qs = location.search.substr(1), // 获取url中"?"符后的字串
args = {}, // 保存参数数据的对象
items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
item = null,
len = items.length;
for(var i = 0; i < len; i++) {
item = items[i].split("=");
var name = decodeURIComponent(item[0]),
value = decodeURIComponent(item[1]);
if(name) {
args[name] = value;
}
}
return args;
}对于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url，获取 q1 参数值的方法如下：
var qs = getQueryString();
var q1 = qs["q1"]; // abc用上面两种getQueryString()方法都能很好地解决获取url的querystring参数问题。就此顺便整理一下Location对象，方便日后学习参考。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。