使用JavaScript获取URL中的参数(两种方法)

当我们需要从URL中获取特定的参数时，JavaScript是一个非常方便的工具。在JavaScript中，我们可以使用两种方法来获取URL中的参数：

方法一：使用正则表达式

JavaScript中的RegExp对象可用于匹配字符串中的模式。我们可以定义一个正则表达式来匹配URL中的参数，然后从匹配结果中提取出我们需要的参数。

以下是我们可以使用的正则表达式：/[\?\&]([^&]+)=([^&]+)/g

• 匹配以?或&开头的字符串，
• 以一个或多个非&字符(string of non-&)作为参数名匹配，
• 以=作为参数名和参数值的分隔符，
• 以一个或多个非&字符作为参数值匹配。

function getParamsFromUrl() {
  var params = {};
  var url = window.location.href;
  var regex = /[?&]([^=#]+)=([^&#]*)/g;
  var match;
  while (match = regex.exec(url)) {
    params[match[1]] = decodeURIComponent(match[2]);
  }
  return params;
}

上述代码中，我们定义了一个getParamsFromUrl函数来获取URL中的所有参数，并将它们存储在一个JavaScript对象中。因为URL中可能存在多个相同的参数名，所以我们将参数对象作为一个键/值对的集合来返回。

以下是一个函数使用方法的示例：

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

方法二：使用URLSearchParams API

URLSearchParams是一个JavaScript内置对象，它提供了一个方便的接口来处理URL中的查询参数。我们可以使用它来获取URL中的参数。

URLSearchParams有以下两个主要方法：
- get(key)：获取给定名称的第一个参数值。
- getAll(key)：获取给定名称的所有参数值。

function getParamsFromUrl() {
  var params = {};
  var querystring = window.location.search;
  var searchParams = new URLSearchParams(querystring);
  searchParams.forEach(function (value, key) {
    params[key] = value;
  });
  return params;
}

上述代码中，我们也定义了一个getParamsFromUrl函数来获取URL中的所有参数，并将它们存储在一个JavaScript对象中。此时我们使用了URLSearchParamsAPI，而不是自定义的正则表达式。

以下是一个函数使用方法的示例：

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

无论您使用哪种方法，您都可以使用JavaScript轻松地获取URL中的参数。