【JavaScript】URLからクエリパラメータを取得して解析する方法
更新日：2024/02/27
JavaScriptでURLからクエリパラメータを取得して解析するケースはあまりないような気がしますが、たまたま直面したので処理方法をお伝えします。
現在ページのクエリパラメータを取得する方法
ブラウザで現在のページURLからクエリパラメータを取得する場合、window.location.searchでクエリ文字列を取得できます。
その文字列を引数としてURLSearchParamsオブジェクトのインスタンスを生成すると、クエリを解析できます。
現在ページのURLSearchParamsオブジェクトを生成
const searchParams = new URLSearchParams( window.location.search );
URLSearchParamsオブジェクトの使い方は、こちら。
URL文字列からクエリパラメータを取得する方法
URL文字列からクエリパラメータを取得する場合、URLオブジェクトのインスタンスを作成します。
URLオブジェクトのsearchParamsプロパティはURLSearchParamsオブジェクトのインスタンスなので、このプロパティを取得します。
URL文字列からURLSearchParamsオブジェクトを生成
const url = "https://ドメイン/?a=1&b=cdefa=2&b=";
const searchParams = new URL(url).searchParams;
URLSearchParamsオブジェクトの使い方
URLSearchParamsオブジェクトの使い方を、次のURLを例にして紹介します。
"https://ドメイン/?a=1&b=cdef&a=2&c&d=%E3%81%82"
has():パラメータの存在確認
has()を使用すると、特定のパラメータが存在するか確認できます。
console.log( searchParams.has("a") ); // true
console.log( searchParams.has("b") ); // true
console.log( searchParams.has("c") ); // true
console.log( searchParams.has("d") ); // true
console.log( searchParams.has("e") ); // false
値を取得するのが目的のときは、has()を使用せずにget()の戻り値がnullかどうかで判断します。
get():パラメータの値取得
get()を使用すると、特定のパラメータの値を取得できます。
その際、次のようなルールに従います。
- 指定したパラメータが存在しないときは、nullを返す
- 値が未指定のときは、空文字("")を返す
- 同名パラメータが存在するときは、最初の値を返す
- エンコード文字列は、デコードしたものを返す
console.log( searchParams.get("a") ); // "1"
console.log( searchParams.get("b") ); // "cdef"
console.log( searchParams.get("c") ); // ""
console.log( searchParams.get("d") ); // "あ"
console.log( searchParams.get("e") ); // null
getAll():パラメータの全ての値取得
getAll()を使用すると、特定のパラメータの全ての値を配列で取得できます。
console.log( searchParams.getAll("a") ); // [ "1", "2" ]
console.log( searchParams.getAll("b") ); // [ "cdef" ]
console.log( searchParams.getAll("c") ); // [ "" ]
console.log( searchParams.getAll("d") ); // [ "あ" ]
console.log( searchParams.getAll("e") ); // [ ]
パラメータが存在しないときは、空の配列が返ります。
値の列挙
URLSearchParamsオブジェクトのインスタンスはイテラブルなので、for...ofで列挙できます。
反復で得られるのは、[パラメータ名,値]です。
for( [key,value] of searchParams){
console.log( `key:${key} value:${value}`);
}
// 結果
// key:a value:1
// key:b value:cdef
// key:a value:2
// key:c value:
// key:d value:あ
仕様として確認できませんでしたが、次のイテレータ生成メソッドが組み込まれています。
- entries(): [パラメータ名,値] を反復するイテレーターを生成
- keys(): パラメータ名 を反復するイテレーターを生成
- values(): 値 を反復するイテレーターを生成
for...ofで反復します。
また同様に仕様として確認できませんでしたが、コールバック反復可能なforEach()が使用できます。
コールバック関数は、(値,パラメータ名)で引数を受け取ります。
searchParams.forEach( (value,key)=>{
console.log( `value:${value} key:${key}`);
});
値の並び替え
sort()を使用するとプロパティ名でソートされ、以降に列挙される順番が変更されます。
searchParams.sort();
for( [value,key] of searchParams){
console.log( `value:${value} key:${key}`);
}
// 結果
// key:a value:1
// key:a value:2
// key:b value:cdef
// key:c value:
// key:d value:あ
パラメータaの二つ目（値が2）は列挙の順番が3番目でしたが、ソートの結果2番目に移動しています。
とりあえずオブジェクトでクエリを取得
has()とかget()とか面倒なので、クエリパラメータをオブジェクトにして返す関数を作成してみます。
const getUrlParams = (url=null)=>{
ulr = url || window.location.href;
const searchParams = new URL(url).searchParams;
const result = {};
for( [key,value] of searchParams){
key = key.trim().replace( /\[ *]$/,"");
if( !result.hasOwnProperty(key) ) result[key] = [];
result[key].push( value );
}
return result;
};
key = key.trim().replace( /\[ *]$/,"");は、= の前にスペースが入っていた時の対処と、PHP風の[ ]指定の対処です。
"https://ドメイン/?a[ ] =1&b =cdef&a[]=2&c&d=%E3%81%82"を渡すと、次のようなオブジェクトが返ります。
{
a: ["1", "2"]
b: ["cdef"]
c: [""]
d: ["あ"]
}
あとはオブジェクトを参照して処理するだけです。
const url = "https://ドメイン/?a[ ] =1&b =cdef&a[]=2&c&d=%E3%81%82";
const getParams = getUrlParams(url);
if( getParams["a"] !== undefined ){
// ・・・
}
更新日：2024/02/27
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
