js怎么判断当前域名，js获取域名的方法是什么

用 JavaScript 判断域名，最直接的办法就是读取 window.location.hostname，再配合 includes、正则或 endsWith 做精确匹配，这套方案能覆盖绝大多数前端场景。

js判断域名是否包含指定字符串的两种写法

日常开发中，最常遇到的需求是“当前访问的域名里是不是含有某个词”，比如要区分测试环境、预发布环境和线上环境，或者检测用户是否从特定推广域名进来，这时候,两种写法足够用。

用 includes 做包含判断

浏览器原生的 String.prototype.includes() 方法，直接判断当前域名里是否包含目标字符串,代码很简单：

const host = window.location.hostname;
if (host.includes('example.com')) {
  // 命中包含逻辑
}

这段代码会匹配 www.example.com、m.example.com、dev-example.com 等所有包含“example.com”的域名，优点是写起来快，缺点也很明显：它无法区分“example.com”和“notexample.com”，如果域名本身是 notexample.com，也会被误命中，对于严谨的场景,需要用正则。

用正则做精确匹配

正则表达式能控制边界，避免包含误伤，判断一个域名是否是主域名或子域名,推荐这样写：

const host = window.location.hostname;
const isTarget = /(^|.)example.com$/i.test(host);

(^|.) 表示要么是开头，要么前面有一个点，这样 badexample.com 就不会误匹配，正则末尾加上 i 忽略大小写，因为域名本身不区分大小写，如果只看主域名，不加子域名，用 host === 'example.com' 就能搞定。

前端根据域名跳转时，如何正确区分主域名和子域名

很多项目需要根据域名做分流，比如访问 old.example.com 就跳转到新站，这时直接拿整个 hostname 去比较，很容易因为带上端口、协议或多余的 www 出错。

先获取域名再切分

window.location.host 包含端口号，example.com:8080，判断域名时，建议先去掉端口,再处理子域名：

const host = window.location.hostname; // 自动不含端口和协议
const parts = host.split('.');

hostname 属性已经去掉了协议和端口，是最干净的域名来源，如果要区分主域名和子域名,从右往左数：

function getMainDomain(host) {
  const parts = host.split('.');
  // 处理 .com.cn 这类二级后缀
  if (parts.length >= 2 && /(com|net|org|gov|edu).(cn|jp|uk|au)$/i.test(host)) {
    return parts.slice(-3).join('.');
  }
  return parts.slice(-2).join('.');
}

这里用到正则 /(com|net|org|gov|edu).(cn|jp|uk|au)$/，匹配国内常见的二级后缀。当遇到 www.example.com.cn 时，主域名是 example.com.cn，而不是 com.cn。

多级子域名处理

有些站点使用多级子域名，a.b.example.com，如果要判断是 example.com 的二级或三级子域，用 endsWith 比 includes 更安全：

const host = window.location.hostname;
if (host === 'example.com' || host.endsWith('.example.com')) {
  // 是主站或任意子域
}

endsWith 天然规避了 fakeexample.com 的问题，也不需要正则，如果还想判断具体是哪个子域,先移除主域部分即可：

const subDomain = host.replace(/.?example.com$/, '');

当 host 是 m.example.com 时，subDomain 是 m，当 host example.com 时，subDomain 变成空字符串,这个操作同样支持列表遍历。

js判断域名是否是本地ip或者localhost的场景

本地开发时，后端接口地址经常是 localhost 或 0.0.1，前端根据环境切换请求域名，却不知道如何精准判断，导致接口路径变成 0.0.1:8080/api 这种组合出错。

判断 localhost 和 IP 的兼容写法

window.location.hostname 在本地环境下可能返回 localhost、0.0.1、[::1] 或局域网 IP,用正则一次性匹配：

const isLocal = /^(localhost|127.0.0.1|[::1]|0.0.0.0)$/i.test(window.location.hostname);

需要提到的一点是，IPv6 的本地地址 :1 在部分浏览器中会带方括号，正则里写上 [::1] 能保证兼容。这种写法比你写多个 判断更省事，也更容易维护。

局域网 IP 判断该怎么做

内网环境比如 168.x.x、x.x.x，不能简单归类为 localhost,但可以单独提取出来：

const isPrivateIp = /^(10.|192.168.|172.(1[6-9]|2d|3[01]).)/.test(window.location.hostname);

这里用了行业共识的私有地址段范围，如果你只关心是否为本机调试，用第一种正则即可，如果还要区分局域网和远程测试服务器,就把第二种单独作为条件判断。

js获得域名后做环境映射的实用技巧

真实项目里，判断域名不是终点，常常要跟着做环境变量映射，把多个域名归到一个环境里，用对象或 Map 管理比 if-else 更清晰。

const envMap = {
  'dev.example.com': 'dev',
  'test.example.com': 'test',
  'www.example.com': 'prod',
  'example.com': 'prod'
};
const currentEnv = envMap[window.location.hostname] || 'unknown';

如果域名带端口，先把 hostname 取出来再查表，因为 hostname 不含端口，如果域名列表很长，也可以用正则循环匹配。关键是把判断逻辑集中在一个函数里，方便测试和后期加域名。

另一个常见操作是：根据域名切换请求基础路径。

const baseURL = isLocal ? 'http://localhost:3000' : 'https://api.example.com';

这样写能让开发环境联调更舒服，也不会污染线上代码，前端 build 时不必手动改地址,运行期自动判断。

如何处理跨域名 iframe 和动态域名

有时候页面嵌入在第三方 iframe 里，window.location 拿到的可能是子页面的域名，也可能是父页面的域名,此时判断的逻辑要分开：

const selfDomain = window.location.hostname;
const parentDomain = document.referrer ? new URL(document.referrer).hostname : '';

document.referrer 能提供父页面的地址，但如果父页面没有设置 document.referrer，可能返回空字符串。判断 iframe 场景时，优先看 window.self 和 window.top 是否同源。

对于动态域名，比如用户访问某个随机生成的二级域名，你需要先提取主域名再查白名单，避免每次都发请求，用一个数组保存允许的域名后缀，然后遍历数组执行

endsWith：

const allowlist = ['.example.com', '.example.net'];
const isAllowed = allowlist.some(suffix => window.location.hostname.endsWith(suffix));

这种写法的好处是白名单维护成本低，新增一个域名只需在数组里加一行，配合 RegExp 转义,也能处理带点号的特殊情况。

js判断域名相关常见问题解答

在百度搜索”js 判断域名”时，总能看到 window.location.href 和 window.location.hostname 的用法，两者区别在哪？

window.location.href 返回整个完整地址，包含协议、域名、端口、路径、参数，https://www.example.com:8080/path?id=1。window.location.hostname 只返回域名部分，不包含协议、端口和路径，判断域名时优先用 hostname，因为它更干净，也不需要额外解析，如果用 href 判断，必须先 new URL(href) 再取 hostname,多一步操作还容易出错。

如何用 js 判断域名是否属于国外站点并做跳转？

无法单纯通过域名结构判断“国外”还是“国内”，因为域名后缀和物理位置没有必然关系，更可靠的做法是维护一份域名白名单或黑名单，用前面提到的 endsWith 方法循环匹配，如果你需要按地理位置跳转，推荐使用浏览器原生的 navigator.language 或 Intl.DateTimeFormat().resolvedOptions().timeZone 做辅助判断。单靠域名后缀，.cn、.us，并不能准确代表站点所在地，因为很多国际域名的注册地不固定。

在 Vue 或 React 项目里，判断域名应该放在哪个生命周期？

通常放在入口文件或路由前置守卫里，Vue 可以在 main.js 的 beforeCreate 阶段判断，React 可以在 useEffect 或路由配置的 beforeEnter 中执行，如果你希望全局只运行一次，就把判断逻辑封装成一个工具函数，在构建配置的 define 中注入环境变量，再结合域名判断。行业专家指出，前端域名判断只适用于体验优化，真正的权限控制必须依赖后端校验。