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

指定したパラメータ名の値を更新する方法について解説します。

この記事のポイント

GETパラメータの値を更新するときはsetメソッドを使う
setメソッドは同じパラメータ名が複数あるときは1つだけ残して他は削除する

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

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

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

JavaScript コード例

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

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

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

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

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

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

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

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