如何在 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.com/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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告