js 获取url参数值|极客笔记

js 获取url参数值

在前端开发过程中，我们经常需要从页面的url中获取参数值，进行相应的操作。本文将详细介绍如何使用JavaScript来获取url中的参数值。

方法一：使用正则表达式

通过正则表达式来提取url中的参数值是一种常见且比较灵活的方法。下面是一个示例代码：

function getUrlParam(key) {
    var reg = new RegExp('(?:\\?|&)' + key + '=(.*?)(?=&|$)', 'i');
    var match = window.location.search.match(reg);
    return match ? decodeURIComponent(match[1]) : null;
}

var userId = getUrlParam('userId');
console.log(userId);

在上面的代码中，我们定义了一个函数 getUrlParam，它接收一个参数 key，表示要获取的参数名。然后使用正则表达式来匹配url中的参数，并返回对应的值。最后通过调用 getUrlParam('userId') 来获取名为 userId 的参数值。

方法二：使用URLSearchParams API

在现代浏览器中，可以使用 URLSearchParams API 来方便地操作URL中的查询参数。下面是一个示例代码：

function getUrlParam(key) {
    var searchParams = new URLSearchParams(window.location.search);
    return searchParams.get(key);
}

var userId = getUrlParam('userId');
console.log(userId);

在上面的代码中，我们定义了一个函数 getUrlParam，它接收一个参数 key，表示要获取的参数名。然后使用 URLSearchParams 来获取url中的查询参数，并通过 get 方法来获取对应的值。最后通过调用 getUrlParam('userId') 来获取名为 userId 的参数值。

方法三：使用自定义函数

除了上述两种方法之外，还可以编写自定义的函数来获取url参数值。下面是一个示例代码：

function getUrlParam(key) {
    var search = window.location.search.slice(1);
    var params = search.split('&');

    for (var i = 0; i < params.length; i++) {
        var param = params[i].split('=');
        if (param[0] === key) {
            return decodeURIComponent(param[1]);
        }
    }

    return null;
}

var userId = getUrlParam('userId');
console.log(userId);

在上面的代码中，我们定义了一个函数 getUrlParam，它接收一个参数 key，表示要获取的参数名。然后将url中的查询参数按照 & 分隔并遍历处理，最终返回对应的参数值。最后通过调用 getUrlParam('userId') 来获取名为 userId 的参数值。