JavaScriptで現在のURLを取得する方法

目次

JavaScriptで現在のURLを取得する方法

Webページ上で現在のURLを取得する必要があるとき、JavaScriptはこのタスクを簡単にこなすことができます。
以下は、どのようにしてそれを達成できるかについてのガイドです。

window.locationオブジェクトとは

window.locationは、ブラウザのウィンドウやタブで表示されている現在のURLに関する詳細情報を提供するオブジェクトです。

完全なURLの取得

以下の方法で現在のページの完全なURLを取得できます。

var currentURL = window.location.href;
console.log(currentURL);

たとえば、ページのURLがhttps://example.com:8080/path/to/page?query=value#sectionの場合、上記のコードはこの完全なURLをコンソールに出力します。

URLの各部分へのアクセス

window.locationにはURLの各部分に直接アクセスするためのプロパティがたくさんあります。 以下はその一部です。

• Protocol: window.location.protocolを使用してURLのプロトコルを取得します。
  
  • 例: https:
• Host: window.location.hostはホスト名とポート番号を含みます。
  
  • 例: example.com:8080
• Hostname: window.location.hostnameでホスト名のみを取得します。
  
  • 例: example.com
• Port: window.location.portを使用してポート番号を取得します。
  
  • 例: 8080
• Path: window.location.pathnameでURLのパス部分を取得します。
  
  • 例: /path/to/page
• Query String: window.location.searchを使用してクエリ文字列を取得します。
  
  • 例: ?query=value
• Hash Fragment: window.location.hashを使用してハッシュフラグメントを取得します。
  
  • 例: #section

まとめ

window.locationオブジェクトを使用することで、JavaScriptを使用してWebページのURLの各部分に簡単にアクセスすることができます。
これにより、URLの情報を動的に読み取ったり、変更したりするための強力なツールを手に入れることができます。