2007年01月20日

Javascript:クエリストリングからパラメータ配列を生成する関数とその逆の関数

クエリストリング(URL の後尾 '?' 以降の文字列:Query String)を連想配列にする関数と、連想配列から Query String を作成する関数。

Javascript は「連想配列」ではありませんけど、この程度なら実質同じかなw
ま、知ってれば持ってる or サラっとやってのけられる関数です。

■ Query String について一応簡単に

http://www.google.co.jp/search?
   hl=ja&q=url+%E3%82%AF%E3%82%A8%E3%83%AA

など、上の場合 '?' 以降の文字列(QueryString)は、単に

 hl = ja
 q = url クエリ

と言う情報をネット上で使うのに問題の少ない文字列に直したものです。url にくっ付けてページ間で簡易なデータの受け渡しをしています。


 スクリプトコード

// Query String から 配列を返す
function getParameter(str){
  var dec = decodeURIComponent;
  var par = new Array, itm;
  if(typeof(str) == 'undefined') return par;
  if(str.indexOf('?', 0) > -1) str = str.split('?')[1];
  str = str.split('&');
  for(var i = 0; str.length > i; i++){
    itm = str[i].split("=");
    if(itm[0] != ''){
      par[itm[0]] = typeof(itm[1]) == 'undefined' ? true : dec(itm[1]);
    }
  }
  return par;
}
// 配列 から Query Stringを返す
function setParameter(par){
  var enc = encodeURIComponent;
  var str = '', amp = '';
  if(!par) return '';
  for(var i in par){
    str = str + amp + i + "=" + enc(par[i]);
    amp = '&'
  }
  return str;
}

 使い方

■ 1.Query String から配列へ。
ret = getParameter(str);
str (Query String)を与えると、
 ret[name1] = item1;
 ret[name2] = item2;
 ret[name3] = item3;
のような配列を返します。
ret = getParameter(location.search);
とすると、ret にはこのスクリプトが、呼び出されたページに付加された url クエリ文字列から、配列が作成されます。

※ name が空文字の場合、無視されます。ex)・・・?=item1&=item2
※ item が空文字の場合、空文字が入ります。ex)・・・?name1=&name2=
※ item がない場合、true が入ります。ex)・・・?name1&name2
※ decodeURIComponent でデコードします。
詳しい内容はこちら。
文字列をURLエンコードするには?
PHPとJavaScriptのURIエンコードを比較(JavaScript++かも日記)

■ 2.配列から Query String へ。
ret = getParameter(par);
par (配列)を与えると、name1=item1&name2=item2 のような Query String を返します。

■ 3.注意。
エンコードやデコードの方法は幾つかあります。
必要があれば、
var dec = decodeURIComponent;
var enc = encodeURIComponent;

の部分を書き換えてください。

例えば phpとやり取りする場合、スペースで問題が発生する場合があるようです。
PHPとJavaScriptのURIエンコードを比較(JavaScript++かも日記)
こちらを参照ください。
posted by HiFa at 18:07 | 🌁 | Comment(0) | TrackBack(1) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
>>> スパムコメントは消してますよん。 お互い無駄な労力は避けましょう。 <<<

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/31766192
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

[tech][グリモン]グリースモンキーデビュー作!Yahoo!TV add to Google Calender
Excerpt: 作ってみました。 ソースひどいですが、割と便利! http://ideo.varivari.com/gm/ytvadd2googlecalender.user.js つまり、Yahoo!TV(htt..
Weblog: ideoの日記
Tracked: 2007-04-03 22:38
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。