JavaScript获取当前网站域名有哪些常用方法？

在现代Web开发中,js 取网站域名是一项基础且频繁的操作，无论是为了进行环境判断、配置API请求、实现跨域通信，还是为了数据统计与分析，能够精准、高效地获取当前网站的域名信息都是开发者必备的技能，本文将深入探讨JavaScript中获取网站域名的多种方法，解析其背后的原理，并提供实际应用场景的代码示例，帮助您全面掌握这一核心知识点。

核心：window.location 对象

所有与当前页面URL相关的信息都封装在全局对象window.location中，这个对象不仅包含了域名，还提供了协议、路径、查询参数等一系列丰富的属性，是JavaScript操作URL的入口。

要理解如何获取域名,首先需要熟悉window.location对象的关键属性，下表清晰地列出了这些属性及其作用：

通过上表可以直观地看到,hostname属性正是我们通常意义上所说的“网站域名”。

获取域名的几种主要方式

获取标准域名（不含端口）

这是最常见的js 取网站域名的需求，直接使用window.location.hostname即可。

const domain = window.location.hostname;
console.log(domain); // 如果当前URL是 https://www.example.com，输出: "www.example.com"

此方法返回的是纯域名,不包含任何端口号或协议信息，适用于绝大多数需要识别网站身份的场景。

获取主机名（包含端口）

在某些特定情况下,例如当应用运行在非标准端口上时，你可能需要获取包含端口号的完整主机信息，这时应使用window.location.host。

const host = window.location.host;
console.log(host); // 如果当前URL是 https://www.example.com:8080，输出: "www.example.com:8080"

获取完整URL

虽然不直接等同于获取域名,但window.location.href在某些需要完整上下文的场景下也很有用，例如生成分享链接。

const fullUrl = window.location.href;
console.log(fullUrl); // 输出完整的URL字符串

进阶技巧：提取主域名

在实际业务中,我们常常需要获取主域名，即忽略子域名（如www、blog等），从blog.example.com中提取example.com，这需要一些字符串处理技巧。

以下是一个简单的函数,用于从域名中提取主域名：

function getMainDomain(hostname) {
  // 移除开头的 'www.'
  let domain = hostname.replace(/^www./, '');
  // 将域名按 '.' 分割成数组
  const parts = domain.split('.');
  // 如果域名是 'example.com' 这样的二级域名，直接返回
  if (parts.length <= 2) {
    return domain;
  }
  // 否则，取最后两部分作为主域名
  // 注意：此方法对 'co.uk' 等二级顶级域名不适用，需要更复杂的逻辑
  return parts.slice(-2).join('.');
}
const currentHostname = window.location.hostname;
const mainDomain = getMainDomain(currentHostname);
console.log(mainDomain); // 如果当前域名是 'sub.example.com'，输出: "example.com"

重要提示：上述简单方法对于一些特殊的顶级域名（如.co.uk, .com.cn）可能无法准确处理，在生产环境中，建议使用更完善的公共后缀列表（Public Suffix List）相关的库来确保准确性。

实际应用场景

掌握js 取网站域名的方法后，可以将其灵活应用于多种场景：

• 环境配置：根据域名判断当前是开发环境、测试环境还是生产环境，从而加载不同的配置文件或API地址。

  const domain = window.location.hostname;
  let apiBaseUrl;
  if (domain.includes('localhost') || domain.includes('127.0.0.1')) {
    apiBaseUrl = 'http://localhost:3000/api';
  } else if (domain.includes('test')) {
    apiBaseUrl = 'https://api-test.example.com';
  } else {
    apiBaseUrl = 'https://api.example.com';
  }

• 跨域处理：在进行API请求时，了解当前域名有助于设置正确的Origin头，或在配置CORS时进行白名单校验。
• 加载：根据不同的域名显示不同的品牌Logo、公司信息、联系方式或主题样式，实现多品牌站点的统一管理。
• 埋点与统计：在向数据分析平台发送数据时，附带域名信息，以便区分不同站点或渠道的用户行为。

相关问答FAQs

问题1：window.location.hostname 和 window.location.host 有什么区别？

解答：两者最主要的区别在于是否包含端口号。window.location.hostname 仅返回网站的域名部分（www.example.com），而 window.location.host 返回的是域名和端口号的组合（www.example.com:8080），当网站使用标准的80端口（HTTP）或443端口（HTTPS）时，host 的返回值与 hostname 相同，因为浏览器通常不会在URL中显示标准端口，但在使用非标准端口时，这个区别就至关重要了。

问题2：如何使用JavaScript在不包含 www. 前缀的情况下获取域名？

解答：你可以使用字符串的 replace() 方法结合一个简单的正则表达式来轻松实现，这个正则表达式 (/^www./) 会匹配字符串开头的 www.，并将其替换为空字符串，示例代码如下：

let hostname = window.location.hostname; // 假设当前域名为 "www.example.com"
let domainWithoutWww = hostname.replace(/^www./, '');
console.log(domainWithoutWww); // 输出: "example.com"
// 如果域名本身没有 www. 前缀，它也不会受影响
hostname = "blog.example.com";
domainWithoutWww = hostname.replace(/^www./, '');
console.log(domainWithoutWww); // 输出: "blog.example.com"

这种方法简洁高效,适用于绝大多数需要去除 www. 前缀的场景。