JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでURLからホスト名を抽出する方法をわかりやすく解説

JavaScriptでURLからホスト名（ドメイン名）の部分だけを取り出したい場合は、URLオブジェクトが持つhostnameプロパティを使うのが最も簡単です。

URLオブジェクトとhostnameプロパティ

URLコンストラクタにURL文字列を渡してインスタンスを作成すると、そのURLを構成する各要素（プロトコル、ホスト名、パス、クエリなど）に個別にアクセスできるようになります。このうちホスト名はhostnameプロパティで取得できます。

サンプルコード

以下は、実際に動作するシンプルなデモです。

<!DOCTYPE html>
<html>
<body>
<script>
var url = new URL("https://example.com/asdf/asdf/sadf.aspx?blah");
document.write(url.hostname);
</script>
</body>
</html>

実行結果

example.com

この例では、パス部分（/asdf/asdf/sadf.aspx）やクエリ文字列（?blah）は無視され、「example.com」というホスト名だけが出力されます。

現在開いているページのホスト名を取得するには

ブラウザで現在表示中のページのホスト名を取得したい場合は、location.hostnameを使うと便利です。

console.log(location.hostname); // 例: "www.example.com"

補足：hostnameとhostの違い

似たプロパティにhostがあります。hostはポート番号が指定されている場合にそれを含めて返す点が異なります。たとえば https://example.com:8080/ の場合、hostnameは「example.com」、hostは「example.com:8080」となります。ポート番号が不要な場合はhostnameを使用しましょう。

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

    Window.location は読み取り専用のプロパティで、現在のドキュメントの位置情報を保持する Location オブジェクトを返します。このオブジェクトを利用することで、URL をホスト名やパスなどに簡単に分解（解析）できます。Location インターフェースは、そのオブジェクトがリンクされている場所（URL）を表します。location オブジェクトには、以下のような便利なプロパティが用意されています。Locationオブジェクトの主なプロパティLocation.hrefURL 全体を格納する DOMString です。この値を変更すると、関連付けられたドキュメントが新しいページへ

  2. JavaScriptでURL文字列からホスト名を抽出する方法

    URL文字列からホスト名（ドメイン部分）を抽出するには、JavaScriptのsplit()メソッドを活用するのが便利です。ここでは、実際のコード例とともにその手順をわかりやすく解説します。コード例function gettingTheHostNameFromURL(websiteURL) { var getTheHostName; if (websiteURL.indexOf(//) > -1) { getTheHostName = websiteURL.split(/)[2]; } else { getTheHostName =