この記事ではJavaScriptで『URLからクエリ文字列やクエリパラメータの値を取得する方法』について、
- URLからクエリ文字列を取得する方法
window.location
オブジェクトのsearch
プロパティを参照する方法URL
インスタンスのsearch
プロパティを参照する方法
- URLからクエリパラメータの値を取得する方法
- クエリ文字列から個々のクエリパラメータを取得する方法
URL
インスタンスから個々のクエリパラメータを取得する方法
などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
URLからクエリ文字列を取得する方法
Web開発において、URLからクエリ文字列を取得する時があります。ここでは、JavaScriptを使ってクエリ文字列を取得する2つの方法について説明します。
window.locationオブジェクトのsearchプロパティを参照する方法
ブラウザのアドレスバーに以下のURLが表示されているとします。
https://example.com/?product=123&user=abc
URLからクエリ文字列(?
から始まる文字列)を取得するためには、window.location
オブジェクトのsearch
プロパティを参照します。
// 現在のページのURLからクエリ文字列を取得
const queryString = window.location.search;
console.log(queryString); // ログ出力: ?product=123&user=abc
URLインスタンスのsearchプロパティを参照する方法
URL
クラスのコンストラクタにwindow.location
オブジェクトを渡して、URL
インスタンスを作成します。その後、URL
インスタンスのsearch
プロパティを参照すると、クエリ文字列を取得することができます。
// URLインスタンスを作成
const url = new URL(window.location);
// URLインスタンスからクエリ文字列を取得
const queryString = url.search;
console.log(queryString); // ログ出力: ?product=123&user=abc
URLが文字列としてあり、その文字列からクエリ文字列を取得する際には、URL
クラスのコンストラクタに文字列形式のURLを渡して、URL
インスタンスを作成します。
// URLインスタンスを作成
const url = new URL('https://example.com/?product=123&user=abc');
// URLインスタンスからクエリ文字列を取得
const queryString = url.search;
console.log(queryString); // ログ出力: ?product=123&user=abc
URLからクエリパラメータの値を取得する方法
JavaScriptを使ってクエリパラメータの値を取得する2つの方法について説明します。
クエリ文字列から個々のクエリパラメータを取得する方法
URLSearchParams
クラスのコンストラクタにクエリ文字列を渡して、URLSearchParams
インスタンスを作成します。その後、URLSearchParams
インスタンスのget
メソッドを用いると、指定したクエリパラメータを取得することができます。
// ブラウザのアドレスバーに以下のURLが表示されていると仮定
// https://example.com/?product=123&user=abc
// URLSearchParamsインスタンスを作成
// URLSearchParamsクラスのコンストラクタには「?product=123&user=abc」を渡している。
const params = new URLSearchParams(window.location.search);
// クエリ文字列から個々のクエリパラメータを取得
const param01 = params.get('product');
const param02 = params.get('user');
console.log(param01); // ログ出力: 123
console.log(param02); // ログ出力: abc
URLインスタンスから個々のクエリパラメータを取得する方法
URL
インスタンスのsearchParams
プロパティのget
メソッドを用いることで、指定したクエリパラメータを取得することができます。
// ブラウザのアドレスバーに以下のURLが表示されていると仮定
// https://example.com/?product=123&user=abc
// URLインスタンスを作成
const url = new URL(window.location);
// URLインスタンスから個々のクエリパラメータを取得
const param01 = url.searchParams.get('product');
const param02 = url.searchParams.get('user');
console.log(param01); // ログ出力: 123
console.log(param02); // ログ出力: abc
URLが文字列としてあり、その文字列からクエリ文字列を取得する際には、URL
クラスのコンストラクタに文字列形式のURLを渡します。
// URLインスタンスを作成
const url = new URL('https://example.com/?product=123&user=abc');
// URLインスタンスから個々のクエリパラメータを取得
const param01 = url.searchParams.get('product');
const param02 = url.searchParams.get('user');
console.log(param01); // ログ出力: 123
console.log(param02); // ログ出力: abc
本記事のまとめ
この記事ではJavaScriptで『URLからクエリ文字列やクエリパラメータの値を取得する方法』について、以下の内容を説明しました。
- URLからクエリ文字列を取得する方法
window.location
オブジェクトのsearch
プロパティを参照する方法URL
インスタンスのsearch
プロパティを参照する方法
- URLからクエリパラメータの値を取得する方法
- クエリ文字列から個々のクエリパラメータを取得する方法
URL
インスタンスから個々のクエリパラメータを取得する方法
お読み頂きありがとうございました。