JavaScript

最終更新日:
公開日:

レシピ

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パラメータを削除したものに更新します。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。