JavaScriptでURLの情報を取得する方法をご紹介いたします。
URLの情報を取得するにはlocationを使いますが、locationで情報を取得することで、URL内のクエリやハッシュなどを使って条件分岐することができます。
locationでURLの情報を取得する方法
locationで情報を取得するには、下記のように取得したい情報を指定します。
<script>
const current_url = location.href;
</script>locationで取得できる情報は下記の通りです。
| location.href | URL全体 |
| location.protocol | プロトコル(http: もしくは https:) |
| location.host | ホスト名(例：example.com:8080) |
| location.hostname | ドメイン名(例：example.com) |
| location.port | ポート番号 |
| location.pathname | パス名(例：/hoge/foo) |
| location.search | ?以降のクエリ文字列(例：?s=hoge) |
| location.hash | #以降の文字列(例：#hoge) |
例えば、URLに「#hoge」というハッシュが付いているかどうかで条件分岐するには、下記のように記述します。
<script>
if (location.hash === '#hoge') {
console.log('URLに#hogeが付いています');
} else {
console.log('URLに#hogeは付いていません');
}
</script>あとがき
URL内の情報から何かしらの処理をさせたいケースは結構あると思うので、locationで取得できる情報を覚えておくと便利ですね。
ちなみに「window.location.href」というようにwindowオブジェクトを明示的に指定してもOKです。