JS获取域名真有这么难？新手如何快速搞懂网站身份证？

哎，你遇到过这种情况吗？辛辛苦苦做的网站，用户总问："这网址怎么像山寨的？" 就像我邻居老王去年开网店，用了个乱七八糟的域名，结果客户都以为他是骗子。这时候你肯定想问：​​JS到底怎么获取域名？这玩意儿跟网站身份证有啥关系？​​

一、三招教你轻松抓取域名

​​第一招：window.location**​​
这可是浏览器自带的GPS导航仪，输入这行代码就能找到你家网站的"门牌号"：

javascript**
let 域名 = window.location.hostname;console.log('你家域名是：' + 域名);  // 比如输出 www.laowang.com

老王之前死活记不住这串代码，后来我让他想象成"浏览器地址栏的读心术"，立马就开窍了。

​​第二招：document.domain秘籍​​
适合要找网站"家族总部"的情况。比如子域名shop.laowang.com用了这招：

javascript**
let 总域名 = document.domain;console.log('家族总部在：' + 总域名);  // 输出 laowang.com

不过要注意，现在有些浏览器把这功能锁死了，就像小区门禁升级不好使了似的。

​​第三招：正则表达式拆快递​​
遇到复杂网址像https://user:pass@shop.laowang.com:8080/item?=123#top这种，直接上拆包裹神器：

javascript**
let 拆包裹 = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/i;let 域名 = window.location.href.match(拆包裹)[1];

这套组合拳打下来，管你带不带www、端口号还是登录信息，都能精准抓取。

二、实战现场：老王网店变形记

去年双十一，老王网店突然访问量暴增，结果发现：

1. 统计工具分不清用户是从http://www.laowang.com还是laowang.com来的
2. 支付接口老是报域名验证失败
3. 广告投放数据全混在一起

用上这三板斧后：

javascript**
// 统一域名格式let 标准域名 = window.location.hostname.replace('www.', '');// 支付接口验证if(标准域名 !== 'laowang.com') alert('山寨网站警告！');// 广告数据清洗统计系统.记录访问来源(标准域名);

效果立竿见影，转化率直接涨了30%。

三、新手必坑指南（血泪教训）

​​坑1：本地开发总显示localhost​​
小王刚开始学前端，在本地测试时老是得到127.0.0.1。解决方法超简单：

javascript**
let 当前域名 = process.env.NODE_ENV === 'development'              ? 'laowang.com'              : window.location.hostname;

就像给测试环境戴了个仿真面具。

​​坑2：第三方网站嵌代码​​
有个做H5活动页的朋友，代码嵌在别人网站里，结果window.location拿到的全是别人的域名。后来改成：

javascript**
let 真实域名 = document.referrer ? new URL(document.referrer).hostname : '';

相当于给代码装了GPS追踪器。

​​坑3：移动端域名乱跳​​
做小程序的朋友遇到m.laowang.com和www自动跳转的问题，最后用：

javascript**
let 移动端域名 = window.location.hostname.startsWith('m.')               ? 'm.laowang.com'               : 'www.laowang.com';

一劳永逸解决问题。

四、灵魂拷问时间

​​Q：用CDN会影响域名获取吗？​​
A：就像快递代收点不会改变你家地址，只要配置好CNAME解析，window.location照样能拿到真实域名。不过要注意海外CDN节点可能返回英文域名哦。

​​Q：获取的域名带端口怎么办？​​
A：试试这个组合技：

javascript**
let 完整地址 = window.location.host;  // 包含端口号let 清洗版 = 完整地址.split(':')[0]; 

就像吃鱼先挑刺一样简单。

​​Q：要兼容IE老古董怎么办？​​
A：上绝招——创建隐形a标签：

javascript**
let 隐形快递员 = document.createElement('a');隐形快递员.href = 'http://老古董网站.com';console.log(隐形快递员.hostname);

这套方法连IE6都能搞定。

小编观点

说实话，获取域名这事儿就像查户口——听着复杂，其实找准方法分分钟搞定。见过最离谱的是有人花三天写正则表达式，结果最后发现用window.location.hostname一行代码就解决。建议新手记住这个口诀：​​简单场景用location，复杂情况上正则，特殊需求找API​​。

最后说句掏心窝的：别被五花八门的技术名词吓到，其实核心原理就是把网址当字符串处理。就像老王现在逢人就吹："当初觉得域名获取多高端，原来跟切西瓜差不多嘛