织梦医院网站模板,网站建设运营的成本,电脑做ppt一般下载哪个网站好,微信 网站建设方法1#xff1a;现代浏览器都支持 URL 和 URLSearchParams 对象#xff0c;可以很方便地从URL中提取参数
// 假设当前URL为 https://example.com/?nameJohnage30
const url new URL(window.location.href);
// 或者你可以直接传入一个URL字符串
const …方法1现代浏览器都支持 URL 和 URLSearchParams 对象可以很方便地从URL中提取参数
// 假设当前URL为 https://example.com/?nameJohnage30
const url new URL(window.location.href);
// 或者你可以直接传入一个URL字符串
const name url.searchParams.get(name); // John
const age url.searchParams.get(age); // 30
console.log(name, age);
方法2使用正则表达式
可以使用正则表达式匹配URL参数这种方法相对较低效且较复杂但也可以做到。
function getQueryParam(name) {const regex new RegExp([?] name ([^#]*), i)const results regex.exec(window.location.href)return results ? decodeURIComponent(results[1]) : null
}
// 假设当前URL为 https://example.com/?nameJohnage30
const name getQueryParam(name); // John
const age getQueryParam(age); // 30
console.log(name, age)
方法3使用 split 和 reduce
可以通过 split 方法手动拆分查询参数并用 reduce 将其转化为对象。
function getQueryParams() { return window.location.search.substring(1) // 去掉 ? .split() // 按 拆分 .reduce((params, param) { const [key, value] param.split(); params[decodeURIComponent(key)] decodeURIComponent(value || ); return params; }, {});
}
// 假设当前URL为 https://example.com/?nameJohnage30
const params getQueryParams();
const name params[name];// John
const age params[age]; // 30
console.log(name, age);
方法4使用 location.search 和自定义函数
在 location.search 上构建自己的解析函数此方法比较简单。
function getQueryParameter(name) {const params new URLSearchParams(location.search)return params.get(name)
}
// 假设当前URL为 https://example.com/?nameJohnage30
const name getQueryParameter(name); // John
const age getQueryParameter(age); // 30
console.log(name, age)
