[JavaScript] URLのカンタン操作

2015年3月14日

Javascript プログラミング

JavaScriptでツールを作っている時に現在開いているURLを分析したり、リダイレクトさせたり、リファラのURLをカテゴリ分けしたり・・・ URLを操作する事がしばしばあります。 そんな時に使いたいスニペットを作っておきました。

ケース

・URIからルートパスを取得したい。 ※現在開いているサイトの隣ページに移動する場合など ・URLからドメインを取得する。 ・クエリ情報の中から特定のクエリ情報を取得する。※クエリをkey=valueの連想配列で取得する。

ソース

/** * URLからクエリ値を連想配列で返す; * $$URL.getUrlProperty(location.href) * 概要:表示しているページのブラウザアドレスのURLクエリを連想配列で返します。 * param:url *未記入可 */ (function(){ var $$={}; $$.getUrlProperty=function(uri){ if(!uri){ uri = location.href; } var data={}; //URLとクエリ分離分解; var query=[]; if(uri.indexOf("?")!=-1){ query = uri.split("?"); } else if(uri.indexOf(";")!=-1){ query = uri.split(";"); } else{ query[0] = uri; query[1] = ''; } //基本情報取得; var sp = query[0].split("/"); var data={ url:query[0], //dir:this.dir(uri), domain:sp[2], protocol:sp[0].replace(":","") query:(query[1])?(function(q){ var data=[]; var sp = q.split("&"); for(var i=0;i<sp.length;i++){ var kv = sp[i].split("="); if(!kv[0]){continue} data[kv[0]]=kv[1]; } return data; })(query[1]):[], }; return data; }; window.$$URL = $$; return $$; })();

使い方

1.対象ページのHTMLに上記JSソースを挿入(jsタグ、jsファイルどちらでもOK) 2.現在開いているURLの情報を取得 # http://ex.com/index.php?a=1&b=2 var url = $$URL.getUrlProperty(location.href);

URL部分の表示

console.log(url.url); # [結果] http://ex.com/index.php

ドメインを表示

console.log(url.domain); # [結果] ex.com

現在開いている階層までを表示

console.log(url.dir); # [結果] http://ex.com/

http,httpsの表示

console.log(url.protocol); # [結果] http

クエリ情報の表示(a=*)

console.log(url.a); # [結果] 1

Issue

1.ドメイン取得の際に、nodejsなどを使っている場合、通常の80番、443番以外を使用した場合の対応ができていません。 2.POSTクエリの情報は取得できません。input=hiddenなどに格納して別途取得してください。