GETの値を取得する方法

URLのクエリはLocationオブジェクトのsearchプロパティに、すべてのパラメータが1つの文字列として連結されて格納されています。ここではその文字列を分割し、パラメータ名をキーとした連想配列としてGETパラメータを取得する方法を紹介します。

サンプルコード

function GetQueryString()
{
    var result = {};
    if( 1 < window.location.search.length )
    {
        // 最初の1文字 (?記号) を除いた文字列を取得する
        var query = window.location.search.substring( 1 );

        // クエリの区切り記号 (&) で文字列を配列に分割する
        var parameters = query.split( '&' );

        for( var i = 0; i < parameters.length; i++ )
        {
            // パラメータ名とパラメータ値に分割する
            var element = parameters[ i ].split( '=' );

            var paramName = decodeURIComponent( element[ 0 ] );
            var paramValue = decodeURIComponent( element[ 1 ] );

            // パラメータ名をキーとして連想配列に追加する
            result[ paramName ] = paramValue;
        }
    }
    return result;
}

たとえばクエリが?a=1&b=c%26dだとすると、この関数からは{ a="1", b="c&d" }が返されます。

Prototype.js

Prototype.jsを使用するならば、Stringの拡張メソッドであるtoQueryParams()で、

var query = window.location.search.toQueryParams();

と記述するだけです。このメソッドにより上記の関数と同様の結果が返されます。

formからのリクエスト

form要素からGETでリクエストされたパラメータはURLエンコードされ、そしてスペースは「+」に変換されます。URLエンコードされたパラメータはdecodeURIComponent()でデコードできますが、「+」は別に処理が必要です。たとえばそれは、

string.replace( /\+/g, ' ' );

とすれば置換できます。

スペースを含むパラメータによるリクエストの例

以下のフォームで[リクエスト]をクリックすることで、スペースが「+」に変換されることを確認できます。

閲覧中のページへリクエストされます。結果はブラウザのアドレスバー (ロケーションバー) で確認してください。

関連ページ

JavaScriptのドキュメントから検索