首先,获取URL中的参数是Web开发经常需要的功能。JavaScript提供了多种方式可以获取URL参数,本文将介绍其中两种最常见的方式:URLSearchParams和正则表达式。
使用URLSearchParams
URLSearchParams是一个原生对象,主要用来操作URL查询参数。使用URLSearchParams获取URL参数非常方便。
我们可以用如下代码创建一个URLSearchParams对象:
const urlParams = new URLSearchParams(window.location.search);
这个新建的URLSearchParams对象会自动从当前网页的URL中获取查询参数。如果你想获取另外一个链接中的参数,只需把该链接作为参数传递给URLSearchParams构造函数即可。
一旦我们有了urlParams对象,我们就可以通过调用get()、getAll()、has()、set()、delete()、keys()、values()和entries()方法对其进行查询和修改。下面是几个例子。
获取指定参数的值
const myParam = urlParams.get('myParam');
console.log(myParam);
检查是否存在参数
if (urlParams.has('myParam')) {
// do something
}
使用正则表达式
虽然URLSearchParams是一种非常方便的获取URL参数的方法,但有些时候我们还是需要使用正则表达式来取得它们。
下面是一些正则表达式的示例。
获取所有参数
const url = window.location.href;
const pattern = /[?&](\w+)=([^&#]*)/g;
let params = {};
let match;
while (match = pattern.exec(url)) {
params[match[1]] = decodeURIComponent(match[2]);
}
console.log(params);
获取指定参数的值
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) {
return null;
}
if (!results[2]) {
return '';
}
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
console.log(getParameterByName('myParam'));
以上就是使用URLSearchParams和正则表达式获取URL参数的MarkDown文档攻略,希望对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:浅析JS获取url中的参数实例代码 - Python技术站