最終更新日:
公開日:
レシピ
URL
URLから指定したGETパラメータを削除する
指定したパラメータ名をURLから削除する方法について解説します。
この記事のポイント
- GETパラメータを削除するときはdeleteメソッドを使う
- deleteメソッドは複数同じパラメータ名のGETパラメータがあると全て削除する
GETパラメータを削除する
URLに含まれるGETパラメータを削除するときはURLSearchParamsオブジェクトのdeleteメソッドを使います。
以下の例は、URLのGETパラメータ「username」と「mode」を削除します。
赤字の箇所で削除を実行しています。
DEMOページ
(ブラウザのコンソールを開いてconsole.logの出力を確認してください)
index.js
// 対象URL:http://gray-code.com/js_sample/url3.html?username=teest&mode=data1&mode=data2
// URLを取得
var url = new URL(window.location.href);
// URLSearchParamsオブジェクトを取得
var params = url.searchParams;
params.delete('username');
params.delete('mode');
console.log(params.get('username')); // null
console.log(params.get('mode')); // null
// アドレスバーのURLからGETパラメータを削除
history.replaceState('', '', url.pathname);
削除するとパラメータは存在しないため値もnullになります。
また、対象URLにはmodeが2つ存在しますが、deleteメソッドは該当するパラメータ名を全て削除します。
もしdeleteメソッドに指定したパラメータ名のGETパラメータが存在しない場合は何も起こりません。
最後に、history.replaceStateメソッドでブラウザのアドレスバーに表示されるURLからもGETパラメータを削除したものに更新します。