在JavaScript开发中,从完整的URL字符串中精准截取域名是一项基础且关键的操作。最推荐、最标准且符合现代浏览器性能要求的方案是使用浏览器原生的URL API，即通过 new URL() 构造函数配合 hostname 属性来实现。 这种方法不仅代码简洁、可读性强，而且能够自动处理各种复杂的URL格式，避免了手动编写正则表达式可能带来的解析错误和维护难题。
使用原生 URL API 进行域名截取
在现代Web开发中,利用 new URL() 接口是处理URL解析的“黄金标准”，该接口内置了强大的解析逻辑，能够自动识别协议、主机名、端口、路径等各个组成部分，极大地降低了开发者的心智负担。
具体实现方式非常直接,需要将目标URL字符串作为参数传递给 URL 构造函数，创建一个URL对象，随后，通过访问该对象的 hostname 属性即可获取纯净的域名。
function getDomain(url) {
try {
const urlObj = new URL(url);
return urlObj.hostname;
} catch (e) {
console.error("Invalid URL:", e);
return null;
}
}
// 示例
console.log(getDomain("https://www.example.com/path/to/page?query=123"));
// 输出: www.example.com
这里有一个关键点需要注意：hostname 属性与 host 属性的区别。hostname 仅返回域名（如 www.example.com），而 host 则会包含端口号（如 www.example.com:8080），在绝大多数SEO和业务场景中，我们需要的是不带端口的 hostname，这能确保后续的数据统计和跨域判断更加准确。
引入 try...catch 错误处理机制是必不可少的环节，如果传入的字符串不符合URL规范（例如传入了一个相对路径或格式错误的字符串），new URL() 会抛出错误，捕获这些错误可以防止整个脚本崩溃，提升代码的健壮性。
正则表达式方案及其适用场景
尽管原生 API 是首选，但在某些无法使用现代 API 的极端老旧环境（如非常古老的 IE 浏览器）或需要进行特定模式匹配的场景下，正则表达式依然是一种不可或缺的解决方案，正则表达式的优势在于其灵活性和对特定格式的定制化处理能力。
一个健壮的域名截取正则表达式需要考虑到协议的存在与否、www 前缀的存在与否以及端口的干扰。
function getDomainByRegex(url) {
// 该正则匹配 http:// 或 https:// 开头，可选的 www.，以及核心域名
const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/:]+)/;
const match = url.match(regex);
return match ? match[1] : null;
}
// 示例
console.log(getDomainByRegex("https://blog.example.com/article"));
// 输出: blog.example.com
正则表达式的核心逻辑在于“锚定”与“捕获”，上述正则中：
^(?:https?:\/\/)?：非捕获组，匹配以http://或https://开头的部分， 表示这部分是可选的。(?:www\.)?：另一个非捕获组，匹配www.前缀，同样设为可选。([^\/:]+)：这是核心捕获组，它匹配除了斜杠（路径分隔符）和冒号（端口分隔符）之外的所有字符，直到遇到这些符号为止。
正则方案存在明显的局限性，它难以完美处理国际化域名（IDN）、包含用户名密码的复杂URL以及一些边缘情况，除非有特殊的兼容性需求，否则应优先使用原生 URL API。
进阶处理：去除子域名与统一格式
在实际的企业级应用中,仅仅截取域名往往是不够的，我们经常需要获取主域名（Top-Level Domain + Second-Level Domain），例如将 www.example.com 或 news.example.com 统一处理为 example.com，以便于进行跨子域名的数据统计或权限控制。
这需要结合 hostname 和 split 方法进行二次处理：
function getMainDomain(url) {
try {
const hostname = new URL(url).hostname;
// 将域名按点分割成数组
const parts = hostname.split('.');
// 如果是类似 localhost 的环境，直接返回
if (parts.length <= 2) return hostname;
// 假设我们处理的是常见的 .com, .cn, .net 等后缀
// 简单的逻辑是取最后两部分，对于 co.jp 等特殊情况需要更复杂的公共后缀表（Public Suffix List）支持
return parts.slice(-2).join('.');
} catch (e) {
return null;
}
}
console.log(getMainDomain("https://www.baidu.com"));
// 输出: baidu.com
这种处理方式在SEO和用户行为分析中具有重要意义，它能够帮助网站所有者将来自不同子域名的流量归一化，从而获得更准确的访问数据，需要注意的是，对于像 com.cn、co.uk 这样的多级后缀，简单的切片逻辑可能会失效，最专业的解决方案是引入“公共后缀列表”算法库，但这通常超出了纯原生JS的轻量级范畴，在大多数常规业务中，基于 split 的逻辑已足够应对。
安全性与性能考量
在涉及URL截取时,安全性是一个不容忽视的维度，如果截取的域名用于后续的重定向（window.location.href）或 AJAX 请求，必须严防“开放重定向”漏洞，攻击者可能会构造恶意的 URL 参数（如 javascript:alert(1) 或 //evil.com）。
使用 new URL() API 本身就提供了一层天然的安全屏障，如果传入的字符串不是有效的 URL，构造函数会报错，从而阻止了恶意代码的执行，相比之下，直接操作字符串或使用不严谨的正则则更容易中招。
在性能方面,原生 API 的执行效率远超正则表达式，浏览器对 URL 构造函数进行了底层的优化，处理速度极快，在需要批量处理大量 URL（如分析服务器日志）的场景下，原生 API 的性能优势将更加明显。
相关问答
Q1：如果传入的 URL 不包含协议（如 www.example.com），new URL() 还能正常工作吗？
A：不能。new URL() 构造函数要求传入的字符串必须包含协议（如 http:// 或 https://），如果传入的是不带协议的字符串，浏览器会抛出 TypeError，解决方案是在调用前检测字符串是否以 http 开头，如果没有，可以自动补全 https://，或者使用正则表达式作为备选方案来处理这种非标准格式的输入。
Q2：如何判断两个 URL 是否属于同一个域名（同源策略判断）？
A：最准确的方法是分别解析两个 URL 的 origin 属性。origin 属性包含了协议、域名和端口，这正是同源策略判断的三个核心要素，代码示例如下：
const url1 = new URL('https://example.com:80');
const url2 = new URL('https://example.com');
console.log(url1.origin === url2.origin); // 输出: true，因为浏览器默认 https 端口为 443，但这里显式指定了 80，实际结果视具体实现而定，通常建议直接比较 hostname 和 protocol。
更严谨的做法是手动比较 protocol、hostname 和 port，以确保逻辑完全符合业务需求。
希望以上关于 JavaScript 截取 URL 域名的详细解析能为你的开发工作提供实质性的帮助，如果你在实际项目中遇到了特殊的 URL 格式处理难题，欢迎在评论区分享你的具体需求，我们可以共同探讨最佳的解决方案。
