URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」

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

「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