window.location.searchを使ってGETパラメータを取得
2024-04-02
JavaScriptでGETパラメータの値を取得する方法
JavaScriptを使って、URLに含まれるGETパラメータの値を取得する方法について解説します。
GETパラメータとは
URLに "?" 記号の後に続く、キーと値のペアで構成される情報です。複数のキーと値のペアは"&" 記号で区切られます。
例
https://example.com/?param1=value1¶m2=value2
上記の例では、
param1の値はvalue1
となります。
取得方法
いくつかの方法がありますが、代表的なものを紹介します。
URLSearchParams
URLSearchParams オブジェクトを使用する方法です。
const urlSearchParams = new URLSearchParams(window.location.search);
const param1Value = urlSearchParams.get('param1');
const param2Value = urlSearchParams.get('param2');
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
window.location.search
window.location.search プロパティを使用する方法です。
const searchParams = window.location.search;
const param1Value = searchParams.match(/param1=([^&]*)/)[1];
const param2Value = searchParams.match(/param2=([^&]*)/)[1];
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
クエリ文字列を直接パースする方法です。
const params = {};
const searchParams = window.location.search;
searchParams.replace(/^\?/, '').split('&').forEach((param) => {
const [key, value] = param.split('=');
params[key] = value;
});
const param1Value = params['param1'];
const param2Value = params['param2'];
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
補足
- 上記のコードは、URLエンコードされた文字列をデコードする必要があります。
HTML
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GETパラメータの値を取得</title>
</head>
<body>
<p>URL: <a href="index.html?param1=value1¶m2=value2">index.html?param1=value1¶m2=value2</a></p>
<p>param1: <span id="param1"></span></p>
<p>param2: <span id="param2"></span></p>
<script src="script.js"></script>
</body>
</html>
JavaScript
const param1Element = document.getElementById('param1');
const param2Element = document.getElementById('param2');
const urlSearchParams = new URLSearchParams(window.location.search);
const param1Value = urlSearchParams.get('param1');
const param2Value = urlSearchParams.get('param2');
param1Element.textContent = param1Value;
param2Element.textContent = param2Value;
実行結果
上記のコードを実行すると、ブラウザに以下のように表示されます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GETパラメータの値を取得</title>
</head>
<body>
<p>URL: <a href="index.html?param1=value1¶m2=value2">index.html?param1=value1¶m2=value2</a></p>
<p>param1: value1</p>
<p>param2: value2</p>
<script src="script.js"></script>
</body>
</html>
解説
- HTMLファイルでは、
index.html?param1=value1¶m2=value2というURLをリンクとして記述しています。 - JavaScriptファイルでは、
URLSearchParamsオブジェクトを使用して、URLに含まれるGETパラメータの値を取得しています。 - 取得した値は、
param1Elementとparam2Element要素に表示されています。
上記のコード以外にも、window.location.searchプロパティや、クエリ文字列を直接パースする方法など、さまざまな方法でGETパラメータの値を取得することができます。
GETパラメータの値を取得するその他の方法
const searchParams = window.location.search;
const param1Value = searchParams.match(/param1=([^&]*)/)[1];
const param2Value = searchParams.match(/param2=([^&]*)/)[1];
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
- クエリ文字列を正規表現でパースし、パラメータの値を取得します。
const params = {};
const searchParams = window.location.search;
searchParams.replace(/^\?/, '').split('&').forEach((param) => {
const [key, value] = param.split('=');
params[key] = value;
});
const param1Value = params['param1'];
const param2Value = params['param2'];
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
- クエリ文字列を
?記号で分割し、キーと値のペアを取得します。 - キーと値のペアをオブジェクトに格納します。
- オブジェクトからパラメータの値を取得します。
const urlSearchParams = new URLSearchParams(window.location.search);
const param1Value = urlSearchParams.get('param1');
const param2Value = urlSearchParams.get('param2');
console.log(param1Value); // "value1"
console.log(param2Value); // "value2"
URLSearchParamsオブジェクトを使用して、URLのクエリ文字列をパースします。get()メソッドを使用して、パラメータの値を取得します。
上記以外にも、さまざまな方法でGETパラメータの値を取得することができます。
- ライブラリを使用する
- 自作の関数を作成する
javascript url url-parameters
