js 获取地址栏参数封装方法

最新推荐文章于 2024-02-02 11:48:53 发布

xiaoerbuyu1233

最新推荐文章于 2024-02-02 11:48:53 发布

阅读量192

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/134558493

版权

本文介绍了一个JavaScript函数getUrlParams，用于解析URL中的查询参数并以对象形式返回。它通过处理window.location.search获取和解码参数，以便于在代码中轻松访问这些参数。

摘要由CSDN通过智能技术生成

下面是一个 JavaScript 函数，用于获取 URL 中的参数并以对象形式返回：

//获取地址栏参数(返回对象)
    function getUrlParams() {
        var urlParams = {};
        var queryString = window.location.search;

        if (queryString) {
            queryString = queryString.replace(/^\?/, '');
            var paramPairs = queryString.split('&');

            for (var i = 0; i < paramPairs.length; i++) {
                var pair = paramPairs[i].split('=');
                var key = decodeURIComponent(pair[0]);
                var value = decodeURIComponent(pair[1] || '');
                urlParams[key] = value;
            }
        }

        return urlParams;
    }

在上面的代码中，我们定义了一个名为 getUrlParams 的函数，用于获取 URL 中的参数，并返回一个包含所有参数的对象。函数内部首先使用 window.location.search 获取 URL 中的查询字符串部分（即参数部分），然后通过解析查询字符串来填充一个名为 urlParams 的对象。

具体来说，我们首先使用 replace 方法将查询字符串中开头的问号去掉，然后使用 split 方法将查询字符串拆分成多个键值对，再使用 decodeURIComponent 方法对键和值进行解码，并将它们填充到 urlParams 对象中。最后，我们将 urlParams 返回给调用方。

您可以在自己的代码中使用这个函数来获取 URL 参数，例如：

var params = getUrlParams(); // 假设 URL 为 https://example.com?name=John&age=30 
console.log(params.name); // 输出 "John" console.log(params.age); // 输出 "30"

这将会输出一个包含 URL 所有参数的对象，其中键为参数名，值为参数值。