方法1:現代瀏覽器都支持 URL 和 URLSearchParams 對象,可以很方便地從URL中提取參數
const url = new URL(window.location.href);
const name = url.searchParams.get('name');
const age = url.searchParams.get('age');
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;
}
const name = getQueryParam('name');
const age = getQueryParam('age');
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;
}, {});
}
const params = getQueryParams();
const name = params['name'];
const age = params['age'];
console.log(name, age);
方法4:使用 location.search
和自定義函數
在 location.search
上構建自己的解析函數,此方法比較簡單。
function getQueryParameter(name) {
const params = new URLSearchParams(location.search);
return params.get(name);
}
const name = getQueryParameter('name');
const age = getQueryParameter('age');
console.log(name, age);
閱讀原文:原文鏈接
該文章在 2024/12/30 15:54:10 編輯過