在JavaScript中获取URL的href
属性中的多个参数值,可以通过以下步骤实现:
URL参数通常位于问号(?
)之后,多个参数之间使用与号(&
)分隔。例如,在URL https://example.com/page.html?param1=value1¶m2=value2
中,param1
和 param2
是参数名,value1
和 value2
是对应的参数值。
可以使用URLSearchParams
接口来解析URL中的查询参数,这是一个简便且现代的方法。
// 假设当前页面的URL是 https://example.com/page.html?param1=value1¶m2=value2
// 方法一:使用URLSearchParams
const params = new URLSearchParams(window.location.search);
// 获取单个参数值
const param1 = params.get('param1'); // "value1"
const param2 = params.get('param2'); // "value2"
// 如果需要获取所有同名参数的值(例如:?tag=javascript&tag=programming)
const allTags = params.getAll('tag'); // ["javascript", "programming"]
console.log(param1, param2, allTags);
// 方法二:手动解析
function getQueryParams() {
const queryEnd = window.location.href.indexOf('?') + 1;
const queryStart = window.location.href.indexOf('?', queryEnd) + 1;
const queryEndIndex = window.location.href.indexOf('#', queryStart) || window.location.href.length;
const query = window.location.href.substring(queryStart, queryEndIndex);
const pairs = query.split('&');
const params = {};
for (const pair of pairs) {
const [key, value] = pair.split('=').map(decodeURIComponent);
if (params[key]) {
if (Array.isArray(params[key])) {
params[key].push(value);
} else {
params[key] = [params[key], value];
}
} else {
params[key] = value;
}
}
return params;
}
const queryParams = getQueryParams();
console.log(queryParams.param1, queryParams.param2);
decodeURIComponent
来解码参数值。URLSearchParams
的getAll
方法来获取所有同名参数的值。URLSearchParams
提供了简洁的API来处理查询参数。URLSearchParams
,对于不支持的浏览器可以使用polyfill。通过上述方法,你可以方便地在JavaScript中获取URL中的多个参数值,并根据需要进行处理。
领取专属 10元无门槛券
手把手带您无忧上云