1. Qiita
  2. 投稿
  3. JavaScript

JavaScriptでGETパラメーターを取得する

  • 51
    いいね
  • 10
    コメント
この記事は最終更新日から1年以上が経過しています。

JavaScriptでGETパラメータを取得する関数。
"var getVal = getUrlVars();"とかやると、GETパラメータがObjectで入る。

JavaScript
/**
 *  GETパラメータを配列にして返す
 *  
 *  @return     パラメータのObject
 *
 */
var getUrlVars = function(){
    var vars = {}; 
    var param = location.search.substring(1).split('&');
    for(var i = 0; i < param.length; i++) {
        var keySearch = param[i].search(/=/);
        var key = '';
        if(keySearch != -1) key = param[i].slice(0, keySearch);
        var val = param[i].slice(param[i].indexOf('=', 0) + 1);
        if(key != '') vars[key] = decodeURI(val);
    } 
    return vars; 
}

===[ 修正 1 ]======
@gocho様に指摘頂いた箇所を修正。

fragment identifier(#以降の文字)が考慮されていません。
http://suika.suikawiki.org/~wakaba/wiki/sw/n/%E3%83%95%E3%83%A9%E3%82%B0%E3%83%A1%E3%83%B3%E3%83%88%E8%AD%98%E5%88%A5%E5%AD%90
fragment identifier中に'&'が含まれる場合、正常に動作しません。

また、[a=b=c]というパラメータは、[key:"a" / value:"b=c"]の様に分解されるのが一般的です。

===[ 修正2 ]======
@asahina_dev様に指摘いただいた箇所を修正。

よそでも書いたが queryString 取得は location.search

===[ 修正3 ]======
@gocho様に指摘頂いた箇所を修正。

vars = []; ではなく、 vars = {}; の方が望ましいですね。
非数がオブジェクトキーになるのなら、ArrayではなくObjectを使います。

===[ 修正4 ]======
@asahina_dev様の指摘を修正。

プログラムでつくられる URL
/dir/file.html?name1=1&name2&name3=&
の name2 が
vars['name2'] = 'name2'; になる予感

キーと値の関係性がおかしい場合はObjectを返しません。
ただ、値が空の場合は想定されるので、キーがあって値が無い場合は空の文字列を返します。
例えば、パラメータが
?name1=1&name2&name3=&
の場合、{name1: "1", name3: ""}というObjectが返ってきます。