JavaScript 中提取 URL 主机名的三种简单方法

2024-03-20 11:38:58

提取 URL 中的主机名：三种简单的方法

作为一名经验丰富的程序员和技术作家，我经常遇到需要从 URL 中提取主机名部分的情况。主机名是 URL 的一个重要组成部分，它标识了托管网站或资源的服务器或网站的名称。在本文中，我将分享三种在 JavaScript 中提取主机名部分的简单方法。

方法 1：使用 `document.location.hostname`

对于当前页面所在的 URL，document.location.hostname 属性提供了一种简单便捷的访问方式。它只返回主机名，不包括端口或任何其他 URL 组件。

const url = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah";
const hostname = document.location.hostname;
console.log(hostname); // Output: aaa.bbb.ccc.com

方法 2：使用正则表达式

正则表达式是一种强大的工具，可用于从字符串中匹配和提取特定模式。以下正则表达式可以用来从 URL 中提取主机名：

const url = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah";
const hostname = url.match(/:\/\/(www\.)?([^\/?#]+)/)[2];
console.log(hostname); // Output: aaa.bbb.ccc.com

方法 3：使用 `URL` 对象

URL 对象提供了处理 URL 的高级方法。它可以在新式浏览器中使用，并且提供了从 URL 中提取各种组件的方便方法。

const url = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah";
const hostname = new URL(url).hostname;
console.log(hostname); // Output: aaa.bbb.ccc.com