基于JavaScript获取url参数2种方法

当开发 web 应用时，我们经常需要从 URL 中获取参数。JavaScript 是一种方便快捷、实用的语言，而获取 URL 参数是 JavaScript 开发中必须面对的一个问题。本文将详细介绍两种基于 JavaScript 获取 URL 参数的方法，并提供具体的示例说明。

方法1：使用正则表达式

要从 URL 中获取参数，我们可以使用 JavaScript 的正则表达式。获取 URL 参数的基本过程如下：

1. 获取当前页面的 URL。
2. 使用正则表达式匹配 URL 中的参数。
3. 将匹配到的参数存储到一个对象中。
4. 返回包含参数的对象。

下面是示例代码：

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

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

  return params;
}

这段代码定义了一个名为 getParams() 的函数，使用了正则表达式来解析 URL 中的参数，并返回一个包含参数的对象。

示例1：

假设当前页面的 URL 为 https://example.com/?name=John&age=20 ，使用 getParams() 函数获取 URL 参数，得到的结果将会是：

{
  "name": "John",
  "age": "20"
}

示例2：

假设当前页面的 URL 为 https://example.com/?category=books&sort=price ，使用 getParams() 函数获取 URL 参数，得到的结果将会是：

{
  "category": "books",
  "sort": "price"
}

方法2：使用 URLSearchParams API

另一种获取 URL 参数的方法是使用 JavaScript 的 URLSearchParams API。这个 API 提供了简单、易用的方法来处理 URL 查询字符串，以及提取和操作 URL 中的参数。

下面是示例代码：

function getParams() {
  var urlParams = new URLSearchParams(window.location.search);
  var params = {};

  for (var [key, value] of urlParams) {
    params[key] = value;
  }

  return params;
}

这段代码使用 URLSearchParams() 构造函数获取当前页面 URL 的查询参数。然后，我们使用 for...of 循环遍历URLSearchParams对象中的每个参数，将它们存储在一个对象中，并返回包含参数的对象。

示例1：

假设当前页面的 URL 为 https://example.com/?name=John&age=20 ，使用 getParams() 函数获取 URL 参数，得到的结果将会是：

{
  "name": "John",
  "age": "20"
}

示例2：

假设当前页面的 URL 为 https://example.com/?category=books&sort=price ，使用 getParams() 函数获取 URL 参数，得到的结果将会是：

{
  "category": "books",
  "sort": "price"
}