プログラミング フロントエンド

【Javascript】URLのクエリパラメータの操作方法(付与、取得、削除)

スポンサーリンク

こんにちは!

今回は「JavascriptでURLのクエリパラメータの操作方法(付与、取得、削除)」についてお伝えしたいと思います。

現在のURLにクエリパラメータを付与してaタグに設定したり、クエリパラメータの値に応じて画面表示を変えたい時などに役立つと思います。

JavascriptでURLのクエリパラメータの操作方法(付与、取得、削除)

結論からお伝えすると、URLオブジェクトを使います。

以下、URLオブジェクトを生成→パラメータ付与→取得→削除の順で例を示します。

必要に応じて、編集してお使いいただければと思います。

// 現在のURLからURLオブジェクトを生成(例として、https://example.com上で以下Javascriptを実行しているとする)
const url = new URL(window.location.href);
console.log(url.href); // https://example.com

// キーを指定し、クエリパラメータを付与
url.searchParams.set('addParam', 'test');
console.log(url.href); // https://example.com?addParam=test

// キーを指定し、クエリパラメータを取得
const addParam = url.searchParams.get('addParam');
console.log(addParam); // test

// キーを指定し、クエリパラメータを削除
url.searchParams.delete('addParam');
console.log(url.href); // https://example.com

 

以上、お疲れさまでした〜🍵

スポンサーリンク

-プログラミング, フロントエンド
-

© 2022 エンジニア×ライフハック Powered by AFFINGER5