JS获取URL参数|极客笔记

JS获取URL参数

在前端开发中，我们经常会需要获取当前页面的URL参数，以便根据不同的参数值来执行不同的操作或跳转到不同的页面。本文将详细介绍如何使用JavaScript来获取URL参数。

方法一：使用正则表达式

我们可以使用正则表达式来获取URL参数，以下是一个简单的示例代码：

function getUrlParams() {
    var url = window.location.href;
    var params = {};
    var reg = /[\?&]([^=&#]+)=([^&#]*)/g;
    var match;

    while (match = reg.exec(url)) {
        params[match[1]] = decodeURIComponent(match[2]);
    }

    return params;
}

var params = getUrlParams();
console.log(params);

运行以上代码后，会输出一个包含了当前页面所有URL参数的对象。例如，如果当前URL是http://www.example.com?name=John&age=25，则输出为{ name: "John", age: "25" }。

方法二：使用URLSearchParams API

现代浏览器提供了URLSearchParams API，可以更方便地获取URL参数。以下是一个示例代码：

function getUrlParams() {
    var urlParams = new URLSearchParams(window.location.search);
    return Object.fromEntries(urlParams);
}

var params = getUrlParams();
console.log(params);

这段代码会将当前页面的URL参数转换为一个包含参数名和值的对象，并输出。与方法一相同，如果当前URL是http://www.example.com?name=John&age=25，则输出为{ name: "John", age: "25" }。

方法三：使用第三方库

除了自己手动解析URL参数外，我们还可以使用第三方库来简化操作。下面是一个示例使用query-string库的代码：

import queryString from 'query-string';

function getUrlParams() {
    return queryString.parse(window.location.search);
}

var params = getUrlParams();
console.log(params);

使用该库可以更加简便地获取URL参数，结果与方法一和方法二相同。