前言

在 Web 开发中，获取当前页面的域名是一个常见的需求。JavaScript 提供了多种方法来实现这一功能，本文将详细介绍这些方法，帮助开发者掌握如何获取域名。

方法一：location 对象

`location` 对象是 JavaScript 中的一个内置对象，它包含了有关当前 Web 页面的信息，包括它的 URL。要获取域名，可以使用 `location.hostname` 属性。```javascriptconst hostname = location.hostname;```

方法二：document 对象

`document` 对象也是 JavaScript 中的一个内置对象，它代表了当前的 HTML 文档。要获取域名，可以使用 `document.domain` 属性。```javascriptconst domain = document.domain;```

方法三：URL 对象

URL 对象是 JavaScript 中的一个内置对象，它表示一个 URL 的解析表示形式。要获取域名，可以使用 `new URL()` 构造函数来创建 URL 对象，然后使用 `hostname` 属性。```javascriptconst url = new URL(location.href);const hostname = url.hostname;```

方法四：正则表达式

正则表达式是一种用于匹配或查找字符串模式的强大工具。可以使用正则表达式从 URL 中提取域名。```javascriptconst hostname = location.href.match(/:\/\/(.[a-z0-9_-]+)/i)[1];```

方法五：第三方库

一些第三方库提供了获取域名的便捷方法。例如，使用 jQuery 库，可以使用以下代码：```javascriptconst hostname = $.fn.fullpath();```

最佳实践

虽然有许多方法可以获取域名，但建议使用 `location.hostname` 属性，因为它是一种原始的 JavaScript 方法，在大多数浏览器中都得到广泛支持。

兼容性

下表总结了不同方法的浏览器兼容性：| 方法 | IE | Edge | Chrome | Firefox | Safari | Opera ||---|---|---|---|---|---|---|| `location.hostname` | 5+ | 12+ | 1+ | 1+ | 1+ | 1+ || `document.domain` | 3+ | 12+ | 1+ | 1+ | 1+ | 1+ || `new URL()` | 11+ | 12+ | 1+ | 1+ | 1+ | 1+ || 正则表达式 | 所有 | 所有 | 所有 | 所有 | 所有 | 所有 || jQuery 库 | 需要引入 | 需要引入 | 需要引入 | 需要引入 | 需要引入 | 需要引入 |

总结

本文介绍了 JavaScript 中获取域名的五种不同方法，包括 `location.hostname`、`document.domain`、`new URL()`、正则表达式和第三方库。对于大多数情况，建议使用 `location.hostname` 属性，因为它是一种原始的 JavaScript 方法，具有广泛的浏览器兼容性。