JavaScript如何正确提取网站域名？

哎，你发现没？有时候在网页里抓取域名就像在火锅里捞金针菇——明明看着简单，一筷子下去总捞不着想要的。今天咱们就掰开揉碎了说说，用JS获取域名到底有哪些门道。

一、为啥要折腾域名提取？

举个真实例子：我朋友做的电商网站，用户从mobile.site.com访问时，支付接口老是跳转到主站。后来发现是域名提取错了，把mobile给漏了。常见需求场景有这些：

1. ​​跨子域登录​​（保持用户会话）
2. ​​数据分析​​（区分流量来源）
3. ​​动态加载资源​​（不同地区用不同CDN）

别小看这几个字母的差别，去年有个统计说，30%的前端bug都是不当引起的。

二、基础方法大比拼

先看这两个最常用的法子：

javascript**
// 方法1：简单粗暴版const domain1 = window.location.hostname;// 方法2：老派稳妥版 const domain2 = document.domain;

这俩有啥区别？咱们用表格比划比划：

举个实际案例：如果你的网址是shop.example.com:8080，用方法1会拿到shop.example.com，而方法2只返回example.com

三、进阶操作手册

​​场景1：提取主域名​​
比如从news.china.site.com中提取site.com

javascript**
const parts = window.location.host('.');const mainDomain = parts.slice(-2).join('.');// 输出：site.com

​​场景2：判断测试环境​​
区分开发/生产环境：

const isTestEnv = ['dev-', 'test.'].some(str =>
window.location.hostname.includes(str)
);

​**​场景3：动态生成API地址​**​根据当前域名自动切换接口：```javascriptconst apiMap = {'admin.site.com': 'https://api-v2.site.com','user.site.com': 'https://api-v1.site.com'};const currentAPI = apiMap[window.location.hostname] || 'https://api.site.com';

四、新手必踩的三个坑

1. ​​SSL证书的坑​​：用location.protocol判断https时，记得转小写

javascript**
// 错误写法if(location.protocol === 'HTTPS'){...}// 正确姿势if(location.protocol.toLowerCase() === 'https:'){...}

1. ​​本地开发的坑​​：localhost和127.0.0.1会被当成不同域名，建议统一用process.env.NODE_ENV判断

2. ​​国际化域名的坑​​：遇到中文域名要转punycode码

javascript**
const punyDomain = 'xn--fi