JS 截取URL后面的参数|极客笔记

JS 截取URL后面的参数

在实际开发中，我们经常会遇到需要获取 URL 中的参数的情况，这在前端和后端开发中都是很常见的操作。本文将详细介绍如何使用 JavaScript 来截取URL后面的参数。

为什么需要截取URL参数

在开发过程中，我们经常会遇到需要从 URL 中获取参数的情况。比如，在前端开发中，我们可能需要根据不同的参数值来展示不同的内容或进行不同的操作；在后端开发中，我们可能需要根据 URL 参数来决定返回不同的数据或执行不同的逻辑。

因此，了解如何快速、准确地获取 URL 参数是很重要的。

截取URL参数的方法

方法一：使用正则表达式截取URL参数

使用正则表达式是一种常见的方式来截取URL参数。通过正则表达式匹配URL中的参数部分，然后再根据需求提取出具体的参数值。

以下是一个可以用于截取URL参数的正则表达式：

// 获取URL中的参数值
function getUrlParams(url) {
    let reg = /(?:\?|&)([^&=]+)=([^&=]+)/g;
    let params = {};
    let match;

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

    return params;
}

// 测试用例
let url = "http://example.com/?name=John&age=30";
console.log(getUrlParams(url));

在上面的代码中，getUrlParams 函数接收一个URL作为参数，然后使用正则表达式来匹配URL中的参数并提取出来。最后返回一个包含所有参数键值对的对象。

运行以上代码，结果如下：

{ name: 'John', age: '30' }

方法二：使用URLSearchParams对象

URLSearchParams 对象是一个很方便的API，可以帮助我们更快捷地获取URL中的参数。

以下是一个使用 URLSearchParams 对象来截取URL参数的示例代码：

// 获取URL中的参数值
function getUrlParams(url) {
    let searchParams = new URLSearchParams(url.search);
    let params = {};

    for (let [key, value] of searchParams) {
        params[key] = value;
    }

    return params;
}

// 测试用例
let url = new URL("http://example.com/?name=John&age=30");
console.log(getUrlParams(url));

在上面的代码中，我们首先根据URL创建一个 URL 对象，然后使用 URLSearchParams 对象来获取URL中的参数。最后返回一个包含所有参数键值对的对象。

运行以上代码，结果如下：