用jQuery获取域名，核心方案是读取window.location对象上的hostname属性，jQuery本身没有专门的口径，但可以用$(location).attr('hostname')这种写法，效率上原生window.location.hostname更直接。
先搞懂location对象，jq获取域名就不难
很多初学前端的朋友以为jQuery库里藏了一个类似$.getDomain()的方法，翻遍文档也找不到，jQuery封装的是DOM操作、事件和Ajax，获取URL各部分的能力来自浏览器内置的location对象，jQuery只是换了个马甲去访问它。
当前页面域名的标准写法
在浏览器控制台里输入下面的代码,立刻返回当前页面的域名，不含协议和端口：
window.location.hostname
比如你在https://www.example.com:8080/path?id=1这个地址下运行，返回结果是www.example.com。
用jQuery风格改写一下,效果一样：
$(location).attr('hostname')
这是把location当成一个DOM节点来读属性，写起来有点绕，但确实可行。日常开发我更推荐直接用原生写法，少一层封装，性能更好，报错也更直观。
拿域名之前，先确认页面有没有加载完
如果你的脚本放在<head>里，想获取当前域名做条件判断，得等DOM就绪：
$(function() {
var domain = window.location.hostname;
console.log(domain);
});
如果放在</body>前面，直接写就行，不需要额外包裹。
javascript获取域名不带端口，分清hostname和host
有朋友会遇到这种情况：window.location.host返回了
www.example.com:8080，多了一个端口号，但需要的只是www.example.com，这就是没分清两个属性的区别。
| 属性 | 示例（针对https://a.com:8080/x） |
|
|---|---|---|
location.hostname |
纯域名 | a.com |
location.host |
域名+端口 | a.com:8080 |
location.port |
仅端口 | 8080 |
location.protocol |
协议 | https: |
多数业务场景只需要域名本身，用hostname就够，如果后端API要求不带端口的域名做拼接，hostname是干净的选择，反过来，做跳转或者测试环境区分时，host更合适。
端口号提取的边界情况
location.port在没有显式端口时返回空字符串，不是80或443，所以别写死判断：
var port = window.location.port || '默认端口';
jquery获取url域名部分，从任意字符串提取的三种思路
上面说的是“当前页面”，但实际开发里更常遇到的是从一段完整的URL字符串中抠出域名，比如后端回传了一个链接，前端要判断是不是站内地址，jQuery在这块帮不上忙，得靠浏览器自带能力。
动态创建a标签解析，老牌可靠
把字符串塞进一个临时<a>元素里，浏览器会帮你自动解析：
function getDomain(url) {
var a = document.createElement('a');
a.href = url;
return a.hostname;
}
调用getDomain('https://blog.example.com/posts/123')
，返回blog.example.com，这招兼容性好，IE时代就有人这么干，现在依然能用。
URL对象，现代浏览器首选
function getDomain(url) {
return new URL(url).hostname;
}
简洁、语义清晰。区别在于new URL()对格式要求更严格，如果传入一个相对路径如/page.html，它直接抛错，a标签法不会，处理用户输入的链接时，建议用try…catch包一下。
正则表达式解析，最不推荐
网上能搜到一堆形如url.match(/://(.[^/]+)/)[1]的写法，但正则处理边界情况很吃力，比如IPv6地址、带认证信息的URL、协议相对地址//example.com/path，除非你有极其特殊的格式化需求，否则别用正则。
三种方法对比,日常开发优先用URL对象，老项目维护用a标签法，正则留给特殊场景。
jq操作域名在实战中扛过的三个坑
坑一：二级域名和主域名的取舍
window.location.hostname返回完整主机名，比如news.qq.com，有时候只需要主域名qq.com，得自己写后缀匹配逻辑，可以用一个数组存常见顶级后缀，然后逐级切割，行业共识认为，这属于业务规则，没有统一API，各家实现方式不同，但思路都是把hostname按拆开，再根据预置后缀列表反查。
坑二：本地开发环境localhost的处理
本地调试时返回的是localhost，不是0.0.1，也不是0.0.0，做环境判断时要兼容这几种情况：
var host = window.location.hostname;
if (host === 'localhost' || host === '127.0.0.1') {
// 本地环境逻辑
}
坑三：iframe嵌套下的域名获取
在iframe里,window.location.hostname拿到的是iframe内部页面的域名，不是父页面的，想拿父级域名，得用window.parent.location.hostname，但跨域时这样访问会报SecurityError，稳妥的做法是用document.referrer去解析来源域名。
结尾说一句
jq获取域名没有奇技淫巧,所有方法都围绕location对象和URL字符串解析展开，核心就一条：读当前页面用hostname，解析任意链接用new URL()，遇到小尾巴端口就用host拆分。
jquery获取当前页面域名带端口，代码怎么写？
用window.location.host直接一步到位，返回类似www.example.com:8080的完整主机信息，如果你用jQuery风格，可以写$(location).attr('host')，两者返回结果相同，需要注意，当页面没有显式端口号时，host返回的就是域名本身，不会自动补上80或443。
从一段a标签的href属性中取纯域名，用a标签解析还是URL对象？
优先用new URL(href).hostname，代码更短且语义清晰，如果你需要兼容极老的浏览器或者拿到的字符串可能不是完整URL（比如只有//example.com/path这种协议相对地址），再用动态创建a标签的方式，它对格式的容错性更好，但注意它会在当前页面触发一次资源请求，只是网络层被忽略。
为什么jQuery没有提供直接的获取域名API？
因为浏览器已经通过location对象暴露了所有URL组成部分，jQuery的设计哲学是解决跨浏览器差异和DOM操作痛点，而location属性在各大浏览器中表现一致，没有额外封装的价值，直接调用原生API就够了，硬用jQuery写反而多一层无意义的转换。
图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/727738.html
