URLパラメータの取得
URL が http://bfotool.com?size=L&color=red&price=10であると仮定します。
var queryString = window.location.search;
console.log(queryString);
// ?size=L&color=red&price=10
URLSearchParams を使用して 解析する
var urlParams = new URLSearchParams(queryString);
結果に対していずれかのメソッドを呼び出します。
var size= urlParams.get('size')
console.log(size);
// L
var color = urlParams.get('color')
console.log(color);
// red
var price= urlParams.get('price')
console.log(price);
// 10
パラメータの存在を確認する
URLSearchParams.has()
を使用する
console.log(urlParams.has('color'));
// true
console.log(urlParams.has('keyword'));
// false
すべてのパラメータを取得する
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var keys = urlParams.keys(),
values = urlParams.values(),
entries = urlParams.entries();
for(const key of keys) {
console.log(key);
}
// size, color, price
for(const value of values) {
console.log(value);
}
// L, red, 10
for(const entry of entries) {
console.log(`${entry[0]}: ${entry[1]}`);
}
// site: L
// color: red
// price: 10