JavaScript

レシピ

URL

URLに含まれるGETパラメータを取得する

URLに含まれるGETパラメータについて、パラメータ名と値の組み合わせを取得する方法について解説します。

この記事のポイント

  • GETパラメータを取得するときはURLからURLSearchParamsオブジェクトを作成する
  • URLSearchParamsオブジェクトはGETパラメータを取得するメソッドが6種類ある

URLからGETパラメータを取得する

URLからGETパラメータを取得するときは、URLからURLSearchParamsオブジェクトを作成してメソッドを実行することで取得することができます。

URLSearchParamsオブジェクトはGETパラメータを取得するメソッドが6種類用意されています。

メソッド名取得する値
getメソッド指定したパラメータの名前を渡すと値を返します。同じ名前のパラメータが複数ある場合は最初の1つのみ値を返します。
getAllメソッド指定したパラメータの値を配列形式で返します。同じ名前のパラメータが複数ある場合も全ての値を取得することができます。
forEachメソッドパラメータ名と値の組み合わせを取得して、指定した関数に渡します。
entriesメソッドパラメータ名と値の組み合わせを配列形式(2次元配列)で返します。
keysメソッド全てのパラメータ名を配列で形式返します。値は含みません。
valuesメソッドパラメータの値を配列で形式返します。パラメータ名は含みません。

以下の例は、対象URLに対してそれぞれのメソッドを実行し、取得した値をコンソールに出力します。
サンプルページはこちらから開いて確認してください。

JavaScript コード例

// 対象URL:https://gray-code.com/js_sample/url1.html?id=5&username=taro&mode=read&aid=gc39195&mode=premium&mode=testuser

// URLを取得
var url = new URL(window.location.href);

// URLSearchParamsオブジェクトを取得
var params = url.searchParams;

// getメソッド
console.log(params.get('id')); // 5
console.log(params.get('mode')); // read

// getAllメソッド
console.log(params.getAll('mode'));
// (3) ["read", "premium", "testuser"]

// forEachメソッド
params.forEach(function(value,key){
	console.log(key + " => " + value);
});
// id => 5
// username => taro
// mode => read
// aid => gc39195
// mode => premium
// mode => testuser

// entriesメソッド
var entries = params.entries();
for(var entry of entries) {
	console.log(entry[0] + " => " + entry[1]);
}
// id => 5
// username => taro
// mode => read
// aid => gc39195
// mode => premium
// mode => testuser

// keysメソッド
var keys = params.keys();
for(var key of keys) {
	console.log(key);
}
// id
// username
// mode
// aid
// mode
// mode

// valuesメソッド
var values = params.values();
for(var value of values) {
	console.log(value);
}
// 5
// taro
// read
// gc39195
// premium
// testuser

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。