JavaScriptで現在のアドレス（URL）の情報を取得｜location.hrefなど

今回は、JavaScriptで現在のアドレス（URL）の情報を、locationオブジェクトのプロパティを使用し取得する例となります。

locationオブジェクトのプロパティで現在のページURLの情報を取得

locationオブジェクトのプロパティは、現在のページURLのさまざまな情報を取得することに利用できます。

以下、locationオブジェクトのそれぞれのプロパティを使用し、現在のページURLから情報を取得する例となります。

document.write(
	// URLを取得
	"URLは、" + location.href + "
",
	// プロトコルを取得
	"プロトコルは、" + location.protocol + "
",
	// ホスト名を取得
	"ホスト名は、" + location.hostname + "
",
	// パス名を取得
	"パス名は、" + location.pathname + "
"
);

上記の例で、現在のURLが「https://example.com/sample-page」の場合、出力結果は以下となります。

URLは、https://example.com/sample-page
プロトコルは、https:
ホスト名は、example.com
パス名は、/sample-page

その他にも、locationオブジェクトのそれぞれのプロパティを使用し、現在のページURLから、以下のような情報も取得できます。

document.write(
	// 検索情報（URLクエリパラメータ）を取得（URL内の?以降の箇所）
	location.search,
	// ハッシュ部分（アンカー）を取得（URL内の#以降の箇所）
	location.hash,
	// ホスト情報を取得
	location.host,
	// ポート情報を取得
	location.port;
);

locationオブジェクトについての詳細は、以下の参考サイトを確認してみてください。