jQueryにquery parserを追加する拡張
query_string(location.search)をパースしてオブジェクトを返す拡張
作り方
jquery.parse.jsとか適当に名前を付けて保存します。
jquery pluginはjQuery.fn.extend(object)を利用するのが作法ですがjQuery.parse()みたいな呼び出し出来なくなるので強引に拡張しています。
※jquery pluginとしては非常にお行儀の悪い書き方ですので真似しないでください。
コメントによるとこの拡張方法で問題無いみたいです
if(typeof jQuery === 'function' && typeof jQuery.parse === 'undefined' ) jQuery.parse = function($_){ var i,$R = {}; $_ = arguments.length === 0 ? location.search : new String($_); if( (i = $_.indexOf('?')) != -1 ) $_ = $_.substring(i+1); if( (i = $_.indexOf('#')) != -1 ) $_ = $_.substring(0,i); jQuery.each( $_.split('&') ,function(){ var $_ = this.split('='); if( typeof $_[0] === 'undefined ' || $_[0] === '') return; var $k = decodeURIComponent($_[0]); var $v = $_.length === 1 ? true : decodeURIComponent($_[1]); if( $k.match(/(.+)\[\]$/) ){ $k = RegExp.$1; if( !jQuery.isArray($R[$k]) ) $R[$k] = []; $R[$k].push($v); }else{ $R[ $k ] = $v; } }); return $R; };
準備
〜の中でjQueryと先ほど作ったjquery.parse.jsをロードします。<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/javascript" src="./jquery.parse.js"></script>
使い方
どちらもオブジェクトが返ります。
//引数が無い場合location.searchを解析します。 var $query = $.parse(); console.log($query); //文字列を渡すと渡した文字列を解析します。 var $query = $.parse('test.html?key1=value1&key2=value2_1&key2=value2_2&key3&key4=&key5[]=value5_1&key5[]=value5_2#hash'); console.log( $query ); console.log( 'key' in $query );//keyが存在するか調べる console.log( $query['key1'] === 'value1' );//右辺がそのまま値になる console.log( $query['key2'] === 'value2_2' );//同じ名前が2回存在する場合後からの値で上書きされる console.log( $query['key5'] );//ただしkeyが[]で終わる場合配列になる console.log( $query['key3'] === true );//=が無い場合trueになる console.log( $query['key4'] === '' );//=の右辺が無い場合空文字になる