1. 使用 URLSearchParams（现代浏览器支持）：
// 假设 URL 为：https://example.com/?name=John&age=30
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"
window.location.search 包含 URL 中 ? 后面的查询字符串部分。URLSearchParams 对象允许你轻松地获取和操作查询参数。
2. 使用正则表达式：
// 假设 URL 为：https://example.com/?name=John&age=30
function getQueryParam(key) {
const regex = new RegExp('[?&]' + key + '=([^&]+)');
const match = window.location.search.match(regex);
return match ? decodeURIComponent(match[1]) : null;
}
const name = getQueryParam('name');
const age = getQueryParam('age');
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"
这个方法使用正则表达式从 window.location.search 中匹配指定 key 的值。请注意，这种方法对于处理多个参数或复杂 URL 可能不够灵活。
3. 使用自定义函数：
// 假设 URL 为：https://example.com/?name=John&age=30
function getQueryParam(key) {
const queryParams = window.location.search.substr(1).split('&');
for (const param of queryParams) {
const [paramKey, paramValue] = param.split('=');
if (paramKey === key) {
return decodeURIComponent(paramValue);
}
}
return null;
}
const name = getQueryParam('name');
const age = getQueryParam('age');
console.log(name); // 输出 "John"
console.log(age); // 输出 "30"
这个方法将查询参数拆分成键值对数组，然后遍历数组查找指定的 key。
选择哪种方法取决于你的需求和项目兼容性要求。如果你的项目支持现代浏览器，推荐使用 URLSearchParams。如果需要兼容旧浏览器，使用正则表达式或自定义函数是可行的方法。
转载请注明出处：http://www.zyzy.cn/article/detail/4569/JSON