レシピ
URL
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つのパラメータだけを残して他は削除します。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。