プラカンブログSTAFF BLOG

2018.12.27

【jQuery】locationオブジェクトでURLのいろいろな情報を取得

下記のようなURLのページがあり、そのURLに含まれるの各種の値を取得する必要があったので、jQuery のlocationオブジェクトを用いた値の取得の方法をメモしておきます。

locationオブジェクトは、現在のURLに関する様々な情報が含まれています。
その情報をjQueryのattr()メソッドを使って取得します。

取得したいページのURL:
https://www.example.com:8888/kansai/index.php?s&prefecture=osaka&submit=検索&paged=2#top

Location.href

$(location).attr('href');

URL全体を取得します。
取得するURLが上記の場合なら取得した結果(値)はURLそのままになります。

https://www.example.com:8888/kansai/index.php?s&prefecture=osaka&submit=検索&paged=2#top

location.hash

$(location).attr('hash');

URLの「#」とそれに続く部分。

#top

Location.host

$(location).attr('host');

URLのホスト (すなわちhostname、コロン「 : 」、port) の部分。

www.example.com:8888/

Location.hostname

$(location).attr('hostname');

URLのドメインの部分。

www.example.com

Location.origin

$(location).attr('origin');

URLのプロトコル、ホスト名、およびポート番号の部分。

https://www.example.com:8888/

Location.pathname

$(location).attr('pathname');

URLのパス部分。先頭の「/」を含めた部分まで。

/kansai/index.php

Location.port

$(location).attr('port');

URLのポート番号の部分。

8888

Location.protocol

$(location).attr('protocol');

末尾の「:」を含む、URLのプロトコルスキーム部分。

https:

Location.search

$(location).attr('search');

URL内の「?」とそれに続くパラメーター(クエリー文字列)の一部分。

?s&prefecture=osaka&submit=検索&paged=2

 

$('p').text($(location).attr('href'));

これで取得した値を出力することができます。

例えば、パラメーターに値を持たせないといけない場合など、このlocationオブジェクトでURLの値を取得してあげると簡単にできちゃうのです!
このlocationオブジェクトは、これからもいろいろ他にも使う機会がありそうなので、なにか良い使い方や変わった使い方などしたときは追記記事などにしたいと思いますー!

参考サイト:https://developer.mozilla.org/en-US/docs/Web/API/Location (英語)

+dc(な)

この記事は、NAGATOMI が書きました。