如何在 JavaScript 中提取 URL 的主機名部分？

在本教程中，我們將瞭解如何在 JavaScript 中提取 URL 的主機名部分。

什麼是 URL？

網頁地址的另一種說法是 URL。例如，tutorialpoints.com 是一個基於單詞的 URL。IP 地址也可以用作 URL（例如 192.168.2.24）。由於名稱比數字更容易記住，因此大多數使用者在網際網路上搜索時會提交名稱的地址。

URL 是一種 Web 瀏覽器請求 Web 伺服器提供特定頁面的一種方法。URL 的語法/格式如下所示。

語法

scheme://prefix.domain:port/path/filename

引數

  • scheme − 指定網際網路服務型別（通常使用 http 或 https）

  • prefix − 指定域名字首（http 的預設值為 www）

  • domain − 描述網際網路域名（例如 tutorialpoints.com）

  • port − 指定主機的埠號（http 的預設值為 80）

  • path − 建立伺服器端路徑

  • filename − 指定資源或文件的名稱

常見 URL 方案

HTTP - 超文字傳輸協議

HTTP 用於普通網頁。這不是一個加密協議。

HTTPS - 安全超文字傳輸協議

HTTPS 用於安全網頁。這是一個加密協議。

FTP - 檔案傳輸協議

FTP 用於下載或上傳檔案。

現在讓我們看看獲取 URL 中主機名的方法。

使用當前視窗位置的 hostname 屬性

在本節中，我們將瞭解如何使用當前視窗位置的 hostname 屬性在 url 中獲取主機名。

語法

請按照以下語法獲取主機名。

First
window.location.hostname;

在這裡，我們從當前視窗的位置訪問 hostname 屬性。

演算法

  • 步驟 1 − 獲取當前 URL

  • 步驟 2 − 使用當前視窗位置 hostname 語法從當前 URL 顯示主機名。

示例

在這個例子中，我們設定了空的 Dom 來顯示輸出。我們編寫了從當前網站位置獲取主機名的程式碼。

<html>
<body>
   <h2>Using the <i>current window location's hostname</i> property</h2>
   <p id="idNullDom"></p>
   <p id="idHostDom"></p>
   <script>
      var varUrl = window.location.href;
      var varNullDom = document.getElementById("idNullDom");
      varNullDom.innerHTML = "Current url " + varUrl;
      var varHostDom = document.getElementById("idHostDom");
      varHostDom.innerHTML = "Location hostname " + (window.location.hostname);
   </script>
</body>
</html>

使用 URL 的 hostname 屬性。

在本節中，我們將瞭解如何使用任何 URL 的 hostname 屬性在 URL 中獲取主機名。在這裡，我們使用 new URL() 建構函式建立了自定義 URL 物件。

語法

請按照以下語法獲取主機名。

var url = new URL("www.sample.com");
var hostname = url.hostname;

在這裡，我們直接從 URL 訪問 hostname 屬性。我們使用 new URL 方法建立一個新的 URL，然後獲取此 url 的 hostname 屬性。

示例

在這個例子中，程式碼使用 new URL() 方法建立了一個示例 url。透過訪問 URL 本身的 hostname 屬性來顯示主機名。

<html>
<body>
   <h2>Using the <i>any url's hostname</i> property</h2>
   <p id="idSampDom"></p>
   <script>
      var sampUrl = new URL("https://tutorialspoint.tw/How-toextract-the-hostname-portion-of-a-URL-in-JavaScript");
      var varSampDom = document.getElementById("idSampDom");
      varSampDom.innerHTML = "url hostname " + (sampUrl.hostname);
   </script>
</body>
</html>

在本教程中，我們學習瞭如何在 JavaScript 中使用 hostname 屬性在 URL 中獲取主機名。

hostname 屬性是 JavaScript 的內建屬性，可以輕鬆地從當前 URL 以及使用 new URL() 方法建立的任何 URL 中訪問主機名。

更新於: 2022-08-23

11K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告