浅析JS获取url中的参数实例代码

首先，获取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文档攻略，希望对您有所帮助。

阅读剩余 30%