URLのGETパラメータの値を更新する

GETパラメータの値を更新する

URLに含まれるGETパラメータの値を更新するときはURLSearchParamsオブジェクトのsetメソッドを使います。

以下の例は、URLのGETパラメータ「username」と「mode」に対して新しい値をセットして更新します。
赤字の箇所で値の更新を実行しています。

JavaScript コード例

// 対象URL:http://js.localhost/url.html?username=test&mode=data1&mode=data2

// URLを取得
let url = new URL(window.location.href);

// URLSearchParamsオブジェクトを取得
let params = url.searchParams;

if( params.get('username') ) {
  params.set('username','taro');
  console.log(params.get('username')); // taro
}

if( params.get('mode') ) {
  params.set('mode','view');
  console.log(params.getAll('mode')); // ['view']
}

if文の条件式では更新したいGETパラメータがあるかを確認しています。
ここで指定したパラメータ名のGETパラメータがある場合のみ、値の更新を実行します。

ただし、setメソッドは更新するパラメータ名がない場合は新しく追加をするので、もともとGETパラメータ名が存在しない場合についてもエラーが出ることはありません。

対象URLには「mode」が2つありますが、同じパラメータ名が複数ある場合はsetメソッドを実行すると値を更新する1つのパラメータだけを残して他は削除します。