【javascript】URLパラメータから複数の値や情報を取得する方法

今回はurlに含まれているパラメータの値を取得する方法を紹介していきたいと思います。

javascriptではURLに含まれるGETパラメータを取得する場合は「location.search」を使います。

URLに含まれたパラメータを取得

URLに含まれているパラメータを取得したい場合は下記のように記述します。

let urlParam = window.location.search;

URLに含まれたパラメータを説明するとまず下記のようなURLがあるとします。

https://7-create.com/?param=test

上記でパラメータは「?param=test」の部分になります。

URLに含まれたパラメータの取得と値の取得

それでは実際にURLに含まれたパラメータの取得と値の取得の方法を紹介していきます。

//URLのパラメータを取得
let urlParam = window.location.search;

//オブジェクトに変換
let params = new URLSearchParams(urlParam);

//パラメータを取得
let tagName = params.get('param');
let tagPath = params.get('name');

たとえばURLのパラメータが下記だった場合。

?param=test&name=web

結果

console.log(tagName); // test
console.log(tagPath); // web 

結果は「test」と「web」というパラメータの値が取得できました。