JS獲取當前域名的幾種方法詳解

在Web開發中，經常需要獲取當前頁面的域名，以方便進行相關操作。本文將介紹JS獲取當前域名的幾種方法，包括location對象、正則表達式和URLSearchParams等，幫助讀者更好地理解JS獲取域名的原理和方法。

一、location對象

location對象是JS中的一個內置對象，用於獲取當前窗口的URL信息。其中，location.hostname屬性可以獲取當前頁面的域名，具體代碼如下：

  
    const domain = location.hostname;
    console.log("當前域名為：" + domain);
  

以上代碼將輸出當前頁面的域名，例如：www.example.com。

需要注意的是，location.hostname只會返回域名信息，而不包括協議和埠號，如果需要獲取完整的URL，需要結合其他屬性使用，例如location.href。

二、正則表達式

正則表達式可以對字元串進行匹配和提取，通過正則表達式我們可以快速提取當前頁面的域名信息。具體代碼如下：

  
    const url = window.location.href;
    const reg = /^https?:\/\/([^/]+)/i;
    const domain = url.match(reg)[1];
    console.log("當前域名為：" + domain);
  

以上代碼將獲取當前頁面的URL，通過正則表達式提取其中的域名信息並輸出。

需要注意的是，正則表達式中的「^https?:\/\/」表示匹配以http或https開頭的字元串，「([^/]+)」表示匹配除了「/」以外的任意字元。

三、URLSearchParams

URLSearchParams是JS中用於操作URL參數的內置對象，可以快速提取URL中的參數和值。在獲取當前域名時，我們可以通過URLSearchParams獲取當前URL中不包含參數的部分，即域名。具體代碼如下：

  
    const url = new URL(window.location.href);
    const domain = url.origin;
    console.log("當前域名為：" + domain);
  

以上代碼使用URL構造函數將當前頁面的URL解析為一個URL對象，再通過URL對象的origin屬性獲取當前頁面的域名信息，並輸出。

四、判斷協議和埠號

在實際開發中，經常需要根據當前頁面的協議和埠號進行相關操作。我們可以通過location對象的protocol和port屬性獲取當前頁面的協議和埠號。具體代碼如下：

  
    const protocol = window.location.protocol;
    const port = window.location.port;
    console.log("當前協議為：" + protocol);
    console.log("當前埠號為：" + port);
  

以上代碼將輸出當前頁面的協議和埠號信息，例如：http和80。

五、總結

本文介紹了JS獲取當前域名的幾種方法，包括location對象、正則表達式和URLSearchParams等。通過這些方法，我們可以在實際開發中更方便地獲取當前頁面的域名信息，並結合協議和埠號進行相關操作。