解析查询 URL JavaScript

在 Web 开发中，我们常常需要解析 URL 中的查询字符串。JavaScript 提供了多种方法可以帮助我们完成这样的任务。

使用 URLSearchParams 对象

URLSearchParams 是用于操作查询字符串的接口。它提供了多个方法可以帮助我们解析查询字符串。

以下是一个例子：

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

console.log(urlParams.get('q')); // 'hello'
console.log(urlParams.get('foo')); // 'bar'

在这个例子中，我们首先通过window.location.search获取了当前 URL 中的查询字符串。然后，我们使用 URLSearchParams 对象将查询字符串解析为一个键值对的集合。

对于上述代码段，如果你不知道 window.location.search 表示什么，可以在下面查看解释。

使用 urlParams.get() 方法可以获取指定键对应的值。

使用正则表达式

除了使用 URLSearchParams 对象，我们还可以使用正则表达式来解析查询字符串。

以下是一个例子：

const queryString = window.location.search.substr(1);
const regex = /([^&=]+)=([^&]*)/g;
const params = {};
let match;

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

console.log(params.q); // 'hello'
console.log(params.foo); // 'bar'

在这个例子中，我们首先通过 window.location.search.substr(1) 去掉了查询字符串中的问号。然后，我们使用正则表达式/([^&=]+)=([^&]*)/g匹配了所有的键值对，并将它们存储在一个对象中。

在正则表达式中，([^&=]+)匹配不包含&或=的任意字符，匹配结果存储在match[1]中；([^&]*)匹配不包含&的任意字符，匹配结果存储在match[2]中。

window.location.search 的解释

window.location.search返回当前 URL 中的查询字符串，包括?字符。例如，如果当前 URL 是http://example.com/?q=hello&foo=bar，那么window.location.search返回'?q=hello&foo=bar'。