こんにちは!
今回は「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
以上、お疲れさまでした〜🍵