簡単にURLクエリパラメーターを取り出すことができるjQueryプラグイン | purl.js

よくECサイトを作るので、URLクエリパラメーターをいちいち split() を使って取得していくのですが、毎回毎回面倒でした。そこで、いいプラグインがないか探したところ、ぴったりのものがあったので紹介します。

ダウンロード

URLの指定

まずは、URLクエリパラメーターを取得するための第一段階です。

現在のURL


var url = $.url();

現在のURLクエリパラメーターを取得することができます。

指定のURL


var url = $.url('http://ithat.me');

$.url() の引数に直接URLを渡すことで、URLを指定できます。

指定の要素


リンク


var url = $('#link').url();

a 要素の href からURLを指定することもできます。

URLの属性

.attr() メソッドを使ってURLから階層やクエリを取得できます。


var url = $.url('http://ithat.me/folder/dir/index.html?p=value&w=item#symbol');

url.attr('source');    // http://ithat.me/folder/dir/index.html?p=value&w=item
url.attr('protocol');  // http
url.attr('host');      // ithat.me
url.attr('relative');  // /folder/dir/index.html?p=value&w=item
url.attr('path');      // /folder/dir/index.html
url.attr('directory'); // /folder/dir/
url.attr('file');      // index.html
url.attr('query');     // p=value&w=item
url.attr('fragment');  // symbol

URLクエリパラメーターの取得

いよいよ本題です。こちらもとてもわかりやすく直感的なプログラムとなっています。


$.url('http://ithat.me/?p=value&w=item').param('p');  // value
$.url('http://ithat.me/?p=value&w=item').param('w');  // item

.param() の引数に取り出したいパラメーターを指定することで、取得することができます。


var url = $.url('http://ithat.me/?p=value&w=item').param();
url.p;  // value
url.w;  // item

また、こんな感じで引数を指定せずにパラメーターを取得する方法もあります。こちらの方がすっきりしてるかな。

ディレクトリ階層を取得


var url = $.url('http://ithat.me/folder/dir/example/index.html');
url.segment(1);  // folder
url.segment(2);  // dir
url.segment(-2); // example

.segment() メソッドの引数に数値を入力することで階層を取得できます。マイナスの値の場合は一番深い階層から上へさかのぼって取得します。


var url = $.url('http://ithat.me/folder/dir/example/index.html');
url.segment();  // ["folder", "dir", "example", "index.html"]

引数を指定しない場合は、ディレクトリ階層を配列として取得できます。

フラグメントパラメーターの取得


$.url('http://ithat.me/#sky=blue&grass=green').fparam('grass');  // green

# パラメーターを取得する場合は .fparam() メソッドを使います。


$.url('http://ithat.me/#/about/us/').fsegment(1);  // about
$.url('http://ithat.me/#/about/us/').fsegment(2);  // us

スラッシュで区切られたパラメーターの場合は .fsegment() メソッドを使います。