【JavaScript】URLからクエリ文字列やクエリパラメータの値を取得する方法

この記事では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インスタンスから個々のクエリパラメータを取得する方法

お読み頂きありがとうございました。

スポンサーリンク