【保存版】JavaScriptでURL解析：ドメイン名、パス、クエリパラメータの取得方法

JavaScript で現在のドメイン名を取得する方法（パス除外）

パスは、ドメイン名に続く / 以降の部分です。例えば、https://www-example-com.cdn.ampproject.org/c/s/www.example.com のパスは /example です。

このチュートリアルでは、以下の 2 つの方法でドメイン名を取得する方法を紹介します。

方法 1: document.domain プロパティを使用する

document.domain プロパティは、現在のドキュメントのドメイン名を返します。この方法は、最も簡単でシンプルな方法ですが、サブドメインを取得できないという制限があります。

const domain = document.domain;
console.log(domain); // example.com

方法 2: window.location オブジェクトを使用する

window.location オブジェクトは、現在のウェブページに関する情報を提供します。ドメイン名を取得するには、hostname プロパティを使用します。この方法は、サブドメインを含むドメイン名を取得できます。

const hostname = window.location.hostname;
console.log(hostname); // www.example.com

補足

• 上記のコード例は、HTTPS 接続で実行されているウェブページでのみ動作します。HTTP 接続の場合は、window.location.hostname の代わりに window.location.host を使用する必要があります。
• ドメイン名の取得に加えて、ポート番号、プロトコル、パスなどの他の URL 情報を取得することもできます。詳しくは、window.location オブジェクトのドキュメントを参照してください。

JavaScript で現在のドメイン名を取得するサンプルコード

方法 1: document.domain プロパティを使用する

const domain = document.domain;
console.log(domain); // example.com

説明:

方法 2: window.location オブジェクトを使用する

const hostname = window.location.hostname;
console.log(hostname); // www.example.com

このコードは、window.location オブジェクトの hostname プロパティを使用して現在のウェブページのドメイン名を取得します。この方法は、サブドメインを含むドメイン名を取得できます。

JavaScript で現在のドメイン名を取得するその他の方法

URL 正規表現を使用すると、URL からドメイン名を抽出することができます。この方法は、柔軟性が高いですが、複雑になる可能性があります。

const url = window.location.href;
const regex = /^(?:https?:\/\/)?([^/]+)/i;
const match = url.match(regex);

if (match) {
  const domain = match[1];
  console.log(domain); // example.com
} else {
  console.error('ドメイン名を取得できませんでした');
}

URL オブジェクトは、URL を解析するための API を提供します。この方法を使用すると、ドメイン名を含む URL のさまざまな部分を取得することができます。

const url = new URL(window.location.href);
const domain = url.hostname;
console.log(domain); // www.example.com

第三者ライブラリを使用する

JavaScript には、URL からドメイン名を抽出するのに役立つライブラリがいくつかあります。これらのライブラリを使用すると、コードをより簡潔に記述することができます。

• サブドメインを含むドメイン名を取得したい場合: window.location.hostname プロパティを使用する
• 柔軟性が必要な場合: URL 正規表現を使用する
• コードを簡潔に記述したい場合: 第三者ライブラリを使用する