从 URL 获取参数 - JavaScript

在 Web 应用中，有时需要从 URL 中获取参数。本文将介绍如何使用 JavaScript 在 URL 中获取参数值。

URL 格式

首先，我们需要了解 URL 的格式。URL 通常由以下几个部分组成：

http://www.example.com:8080/path/to/resource?a=1&b=2#fragment

其中：

• http 是协议名称；
• www.example.com 是主机名；
• 8080 是端口号；
• /path/to/resource 是路径；
• a=1&b=2 是查询字符串，也就是参数；
• fragment 是锚点。

我们要获取的是查询字符串中的参数。

获取 URL 参数

下面是获取 URL 参数的 JavaScript 代码片段：

function getUrlParameter(name) {
  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  var results = regex.exec(location.search);
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

代码解释

代码中定义了一个名为 getUrlParameter 的函数，它接受一个参数 name，表示需要获取的参数名。

function getUrlParameter(name) { ... }

接下来，我们将参数名中的左括号和右括号用反斜杠转义，并创建一个正则表达式，使用 location.search 匹配查询字符串。

name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);

然后，我们使用正则表达式的 exec() 方法从查询字符串中匹配参数值，并通过 decodeURIComponent() 解码该值。

最后，如果参数值为 null，则返回一个空字符串。

return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

使用示例

以下示例演示如何使用 getUrlParameter() 函数获取 URL 参数值。

假设我们有以下 URL：

http://www.example.com/path/to/page?name=John&age=25

我们可以使用以下代码获取参数值：

var name = getUrlParameter('name'); // John
var age = getUrlParameter('age'); // 25

总结

本文介绍了使用 JavaScript 从 URL 中获取参数值的方法，代码片段清晰易懂。如果您需要获取 URL 中的参数值，请使用本文提供的代码并将其集成到您的项目中。