JavaScriptでURLをホスト名とパスに解析する方法

Window.location は読み取り専用のプロパティで、現在のドキュメントの位置情報を保持する Location オブジェクトを返します。このオブジェクトを利用することで、URL をホスト名やパスなどに簡単に分解（解析）できます。

Location インターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。location オブジェクトには、以下のような便利なプロパティが用意されています。

Locationオブジェクトの主なプロパティ

Location.href

URL 全体を格納する DOMString です。この値を変更すると、関連付けられたドキュメントが新しいページへ遷移します。関連ドキュメントと異なるオリジンの値を設定することも可能です。

Location.protocol

URL のプロトコルスキームです。末尾のコロン「:」も含まれます（例："https:"）。

Location.host

ホスト名・コロン「:」・ポート番号を組み合わせた文字列です（例："www.example.com:8080"）。

Location.hostname

URL のドメイン名（ホスト名）です。ポート番号は含まれません。

Location.port

URL のポート番号です。

Location.pathname

先頭の「/」から始まる URL のパス部分です。

Location.search

「?」に続くパラメータ（クエリ文字列）です。モダンブラウザでは、URLSearchParams や URL.searchParams を使うことで、クエリ文字列からパラメータを簡単に取り出せます。

Location.hash

「#」に続くフラグメント識別子（アンカー部分）です。

Location.username

ドメイン名より前に指定されたユーザー名です。

Location.password

ドメイン名より前に指定されたパスワードです。

使用例

実際のコードは次のようになります。

let hostname = location.hostname
let path = location.pathname
console.log(hostname)
console.log(path)

たとえば、次の URL にアクセスした状態で実行した場合：

https://www.tutorialspoint.com/ajax/index.htm

出力結果

コンソールには以下のように表示されます。

www.tutorialspoint.com
/ajax/index.htm

補足：任意のURL文字列を解析したい場合

現在開いているページではなく、任意の URL 文字列を解析したいときは、URL コンストラクタを使うと便利です。

const url = new URL('https://www.tutorialspoint.com/ajax/index.htm');
console.log(url.hostname); // www.tutorialspoint.com
console.log(url.pathname); // /ajax/index.htm

このように、location オブジェクトや URL オブジェクトのプロパティを活用すれば、複雑な文字列処理を行わずとも URL の各要素を安全かつ簡潔に取得できます。