[JavaScript] 現在のURLやパラメタを取得する方法（Location）

JavaScriptで現在のウェブページのURLを取得する方法の紹介です。

JavaScriptでURLを取得したり、パラメタを取得したりするには、Locationオブジェクトを使います。

URLの取得、ホスト情報の取得、アンカーの取得、パスの取得、パラメタの取得など、基本的なデータの取得方法を記載します。

Contents

1 locationの使い方と表示結果
2 利用例

locationの使い方と表示結果

以下は「http://www.example.com/sample/test.html?id=7 #ac」というURLからデータを取得するときの例です。

URLの取得（location.href）

var url = location.href;
alert(url);

//出力
http://www.example.com/sample/test.html?id=7 #ac

var url = location.href;

alert(url);

//出力

http://www.example.com/sample/test.html?id=7 #ac

ホストの取得（location.host）

var url = location.host;
var url = location.hostname;
alert(url);

//出力
www.example.com

var url = location.host;

var url = location.hostname;

alert(url);

//出力

www.example.com

パスの取得（location.pathname）

var pathname= location.pathname;
alert(pathname);

//出力
/sample/test.html

var pathname= location.pathname;

alert(pathname);

//出力

/sample/test.html

パラメタの取得（location.search）

var search = location.search;
alert(search);

//出力
?id=7

var search = location.search;

alert(search);

//出力

?id=7

アンカの取得（location.hash）

var hash = location.hash;
alert(hash);

//出力
#ac

var hash = location.hash;

alert(hash);

//出力

#ac

ポートの取得（location.port）

var port = location.port;
alert(port);

//出力
アクセスしているポート番号が出力される。

var port = location.port;

alert(port);

//出力

アクセスしているポート番号が出力される。

プロトコルの取得（location.protocol）

var protocol= location.protocol;
alert(protocol);

//出力
http;

var protocol= location.protocol;

alert(protocol);

//出力

http;

利用例

URLを取得

ボタンをクリックすると alert に URL が表示される例。

//XHTML
<form name="">
<input type="button" value="URLを取得" onClick="showUrl()">
</form>

//Javascript
<script type="text/javascript">
function showUrl(){
    var url= location.href;
    alert(url);
}
</script>

//XHTML

</form>

//Javascript

function showUrl(){

var url= location.href;

alert(url);

}

</script>

パスを取得

ボタンをクリックすると alert にパスが表示される例。

//XHTML
<form name="">
<input type="button" value="パスを取得" onClick="showPath()">
</form>

//Javascript
<script type="text/javascript">
function showPath(){
    var path= location.pathname;
    alert(path);
}
</script>

//XHTML

</form>

//Javascript

function showPath(){

var path= location.pathname;

alert(path);

}

</script>

パラメタを取得・分割

//URLの?以降の文字を取得する
var url=location.search.substring(1);

//&で文字列を分割する
var str=url.split('&');

//URLの?以降の文字を取得する

var url=location.search.substring(1);

//&で文字列を分割する

var str=url.split('&');

SearchLight