プラグインのダウンロードとインクルード

「jQuery-URL-Parser」は下記URLからダウンロードできます。

jQuery-URL-Parser - GitHub

jQueryプラグインですのでjQueryも忘れず読み込みます。

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.url.js"></script>

URLの取得

以下で現在のURLを取得できます。

javascript
var url = $.url();

引数に直接URLを入れることもできます。

javascript
var url = $.url('http://www.example.com/');

エレメントを指定することで「href」からURLを取得することもできます。

html
<a href="http://www.example.com/">リンク</a>
javascript
var url = $('a').url();

URLの表示

attrメソッドで取得したURLを表示します。
引数に「source」を指定することでURLをそのまま表示します。

alert( url.attr('source') );

この引数を変更することでURLのさまざまな文字列を取得できます。
たとえば下記のようなURLをパースしてみます。

http://www.example.com/folder/dir/index.html?q=value#flug

url.attr('protocol');  // http
url.attr('host');    // www.example.com
url.attr('relative');  // /folder/dir/index.html?q=value#flug
url.attr('path');    // /folder/dir/index.html
url.attr('directory');  // /folder/dir/
url.attr('file');    // index.html
url.attr('query');    // q=value
url.attr('fragment');  // flug

パラメータを取得する

「param」メソッドでURLに付いたパラメータだけ扱うことができます。

var url = $.url('http://www.example.com?name=hoge&age=20').param();
url.name;  //hoge
url.age;  //20

引数に直接パラメータを入れて取り出すこともできます。

var url = $.url('http://www.example.com?name=hoge&age=20');
url.param('name');  //hoge
url.param('age');  //20

ディレクトリ階層を取得

「segment」メソッドでディレクトリ階層を配列で取得できます。

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

引数を指定することで階層を指定して取得できます。

url.segment(1); // folder
url.segment(-2); // example

フラグメントパラメータを取得する

「fparam」メソッドを使用することでフラグメントパラメータを取得できます。

var url = $.url('http://example.com/#name=hoge&age=12');
url.fparam('name'); // hoge
url.fparam('age');   // 12

スラッシュで句切られたものは「fsegment」を使用します。

var url = $.url('http://example.com/#/about/us/');
url.fsegment(1);  // about
url.fsegment(2);  //us