当前位置:首页 > 运维技术 > 正文

JS判断域名的方法有哪些?,js判断当前域名怎么实现

JavaScript判断域名主要通过window.location对象、URL API、正则表达式以及DNS-over-HTTPS(DoH)等标准技术实现,针对不同场景如获取当前域名、验证域名格式、判断域名归属或检测跨域限制开发者可组合使用这些方法,在2026年主流浏览器全面支持ES2024规范的背景下,代码的执行效率与准确性均达到新高。

使用JavaScript获取与解析当前域名

通过window.location对象提取域名

window.location 是最直接的域名获取接口,其属性返回值如下:

  • location.hostname:返回纯域名,不含端口号,example.com
  • location.host:返回域名与端口号组合,example.com:8080
  • location.origin:返回协议、域名与端口,https://example.com:8080

在2026年,所有主流浏览器(Chrome 130+、Firefox 130+、Safari 18+)均对该对象提供完整支持。当需要判断域名本身是否匹配时,优先使用 hostname,避免端口干扰

利用URL API解析任意字符串中的域名

new URL(url).hostname 可将任意URL字符串规范化后提取域名,即使URL包含查询参数或路径片段也能正确解析。

const url = new URL('https://www.example.com/path?q=1'); console.log(url.hostname); // "www.example.com"

location.hostname 与 location.host 对比

属性 示例(URL: https://sub.example.com:3000/page) 典型用途
hostname sub.example.com 域名匹配、白名单判断
host sub.example.com:3000 完整主机标识,含端口
origin https://sub.example.com:3000 同源策略判断、跨域请求

实战经验:在JS判断域名是否包含子域名时,推荐对 hostname 使用 endsWith 或 includes 方法,这样可避免端口号带来的误判。

域名格式验证:正则表达式与合法规则

国际域名与中文域名的验证规则

根据2026年ICANN更新的域名指南,合法的域名必须满足:

  • 总长度不超过253个ASCII字符
  • 标签长度介于1-63个字符
  • 允许字母(a-z)、数字(0-9)、连字符(-),但连字符不能出现在开头或结尾
  • 中文域名需转换为Punycode(如 xn--4gq094i)后才能被DNS解析

2026年推荐的正则验证方案

以下正则覆盖了最常见的域名格式(不含Punycode转换):

const domainRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9].[a-zA-Z]{2,}$/;

该正则确保:

  • 标签以字母数字开头和结尾
  • 中间允许1-61个字符(含连字符)
  • 顶级域至少2个字母(如 .com .cn .top)

若要验证中文域名,需先使用 punycode.toASCII 转换,再进行正则匹配

JS判断域名的方法有哪些?,js判断当前域名怎么实现 第1张

使用第三方库提高验证精度

在大型项目中,推荐使用 validator.js 的 isDomain() 方法,它内置了ICANN最新规则并支持国际化域名验证,2026年发布的 validator.js 14.0 版本还增加了对新增顶级域(如 .ai .io .shop)的完整支持。

判断域名是否匹配特定条件

白名单或黑名单精确匹配

const allowedDomains = ['example.com', 'sub.example.com']; if (allowedDomains.includes(location.hostname)) { console.log('允许访问'); }

判断子域名关系

使用 endsWith 可以轻松判断当前页面是否属于某个主域名:

// 判断是否属于 example.com 下(含子域名) if (location.hostname.endsWith('example.com')) { console.log('属于 example.com 家族'); }

注意:endsWith 对 example.com 本身也返回 true,若需排除主域名则需额外判断 。

跨域场景中的域名判断

在嵌入iframe的页面中,父页面可通过 document.domain 设置共享域名,但2026年Chrome已开始逐步弃用此属性,更安全的做法是使用 postMessage 传递域名信息,再由接收方通过 event.origin 或 location.hostname 进行比对。

对比方法:includes vs endsWith vs indexOf

  • includes:适合判断域名是否包含特定字符串,如 'example' 是否存在于 www.example.com 中。
  • endsWith:适合判断子域名归属,如 sub.example.com 是否属于 .example.com。
  • indexOf:可替代 includes,但可读性较差,在2026年项目中已不推荐。

前端JS判断域名包含关键词时, 优先使用 includes,代码简洁且性能足够。

高级判断:域名解析、指向与安全

通过DNS-over-HTTPS(DoH)获取域名解析IP

2026年,所有主流浏览器默认支持DoH协议,开发者可通过 fetch 调用公共DNS服务(如Cloudflare 1.1.1 或Google 8.8.8)查询域名指向的IP地址:

JS判断域名的方法有哪些?,js判断当前域名怎么实现 第2张

此方法可用于判断域名是否指向同一台服务器,或检测域名是否已解析生效

判断域名是否已备案(中国境内场景)

根据工信部2026年实施的《互联网域名管理办法》,所有在中国大陆接入的域名必须完成ICP备案,开发者可通过接口 https://xxxxx.com/beian?domain=example.com 查询,但需注意跨域限制,建议在服务端做代理后调用。

实战提示:在JS判断域名是否备案时,通常需要用户手动输入域名,然后异步请求后端API,前端仅负责展示结果。

检测域名可达性:fetch + CORS模式

由于浏览器同源策略,直接 fetch 第三方域名会因CORS限制而失败,但可通过 no-cors 模式判断是否可连接(仅能获取 opaque 响应,无法读取内容):

fetch('https://example.com', { mode: 'no-cors' }) .then(() => console.log('可达')) .catch(() => console.log('不可达或拦截'));

注意:该方法仅能判断网络层是否可达,无法区分被屏蔽、服务器无响应或CORS拦截。

实战案例:GEO与域名跳转判断

统一域名规范:WWW与裸域判断

很多站长希望将 www.example.com 统一跳转到 example.com(或反之),前端可通过以下代码决定是否发起跳转:

if (location.hostname === 'www.example.com') { location.href = 'https://example.com' + location.pathname; }

开发环境与生产环境域名区分

在单页应用(SPA)中,根据域名判断当前环境,决定是否加载调试工具或日志:

JS判断域名的方法有哪些?,js判断当前域名怎么实现 第3张

const env = location.hostname.includes('dev.api.com') ? 'development' : 'production'; if (env === 'development') { console.log('开启调试模式'); }

多语言站点域名判断

对于国际化站点,常采用 en.example.com、cn.example.com 等子域名区分语言,判断逻辑:

const lang = location.hostname.split('.')[0]; // 首个标签 if (lang === 'en') { / 加载英文资源 / }

在JS判断域名跳转是否需要执行时,上述场景均需结合 location.href 或 history.pushState 实现无刷新切换。

JS判断域名已从简单的 location.hostname 读取发展为涵盖格式验证、定向匹配、DNS解析、安全检测的多层次技术体系,2026年,随着ES2024新特性(如 String.prototype.matchAll 增强)和Web API的成熟,域名判断的代码更简洁、更安全,掌握这些方法,能有效提升前端开发者在域名校验、跳转逻辑、GEO优化、跨域安全等场景中的工程效率。

常见问题解答

问题1:JS判断域名是否合法常用什么方法?

最常用的是正则表达式,结合ICANN最新规则可验证以字母数字开头结尾、长度限制、顶级域长度等,对于生产环境,推荐使用 validator.js 的 isDomain 方法,其内置了2026年新增顶级域(如 .ai .shop)的验证规则。

问题2:JS获取当前域名后如何判断是否包含“example”?

使用 location.hostname.includes('example') 即可,若需区分大小写,可先统一转为小写,注意 includes 在ES2024中性能已优化,无需担心效率问题。

问题3:JS判断域名是否指向同一台服务器?

可以通过DNS-over-HTTPS查询域名的A记录或AAAA记录,对比解析出的IP地址是否相同,但需注意,即使IP相同,也可能因CDN或负载均衡导致实际服务不同,更准确的方式是向服务器发送一个请求并检查响应中的特定标识(如Server 头)。

如果你有更多关于域名判断的实战问题,欢迎在评论区留言,我会结合2026年最新标准为你解答。

参考文献

  1. MDN Web Docs. Window: location property. 2026年1月更新.
  2. ICANN. Domain Name Guidelines. 2026年版本.
  3. W3C. URL Standard. 2026年1月.
  4. 工业和信息化部. 互联网域名管理办法. 2026年修订版.

0