如何从浏览器的URL中获取查询字符串参数？

要从浏览器的URL中获取查询字符串参数（即 URL 中 ? 后面的部分），可以通过 JavaScript 中的一些方法来实现。这些方法可以解析 URL，并从中提取出参数。

使用 URLSearchParams API

URLSearchParams 是一个内置的 JavaScript API，可以方便地操作 URL 查询字符串。

示例 URL：https://example.com/page?name=John&age=30

// 创建 URLSearchParams 对象，传入 URL 中的查询字符串部分
const urlParams = new URLSearchParams(window.location.search);

// 获取单个参数值
const name = urlParams.get('name'); // 'John'
const age = urlParams.get('age'); // '30'

// 如果参数不存在，则返回 null
const gender = urlParams.get('gender'); // null

使用正则表达式手动解析

如果不想使用 URLSearchParams，也可以通过正则表达式来手动解析 URL 查询字符串。

// 获取当前页面的完整 URL
const urlString = window.location.href;

// 通过正则表达式匹配并解析查询字符串
const params = {};
const regEx = /[?&]+([^=&]+)=([^&]*)/g;
let match;

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

// params 对象现在包含了 URL 中所有的查询字符串参数
console.log(params);

注意事项

• 使用 URLSearchParams API 是推荐的方法，它更简单直观，并且处理了特殊字符的编码解码问题。
• 如果需要在旧版本的浏览器中支持，可以考虑使用正则表达式手动解析的方法，但需要注意处理编码和特殊字符的情况。

无论哪种方法，确保在实际应用中根据情况选择最适合的解析方式来获取和处理查询字符串参数。