如何使用 JavaScript 从 URL 中提取域名？

2026-02-08 05:38:51 0条评论 2次阅读 0人点赞

作为 Web 开发者，你是否经常需要处理各种 URL 链接？无论是进行数据分析、实施安全重定向，还是仅仅是为了在用户界面上显示更友好的链接信息，从完整的 URL 字符串中精准提取域名都是一项非常基础且关键的技能。在这篇文章中，我们将深入探讨在 JavaScript 中获取域名的多种方法，从现代浏览器强大的内置 API 到传统的正则表达式技巧，甚至包括处理那些不规范的“边缘情况”。通过丰富的实战案例和代码示例，我们将帮助你掌握这一核心技能，并在你的项目中游刃有余地应用它。

为什么我们需要提取域名？

在开始编写代码之前，让我们先明确一下在实际开发中哪些场景会用到这个功能。理解这些场景将有助于我们选择最合适的提取策略：

安全验证与白名单：在构建 RESTful API 或处理跨域请求时，我们通常需要验证请求来源的 Referer 头部。我们需要从中提取域名，判断其是否在我们的允许列表中，从而防止未授权的访问。
外部链接标记：对于用户生成的内容，我们可能需要自动识别包含外部链接的文本，并为这些链接添加 rel="nofollow" 标记或跳转提示，这需要我们先识别出链接的域名。
日志分析：在分析服务器日志或前端埋点数据时，原始的 URL 数据往往杂乱无章。提取域名可以帮助我们按访问来源进行分组统计。

0.1 方法一：使用现代 URL API（推荐）

1 从 URL 获取域名

方法一：使用现代 URL API（推荐）

在现代 JavaScript 开发中，最标准、最健壮的方法莫过于使用全局的 URL 构造函数。这是一种原生且强大的解析方式，它不仅代码简洁，而且能自动处理各种复杂的 URL 格式（包括协议、端口、路径参数等），大大降低了我们出错的概率。

它是如何工作的？

INLINECODEbf41c9f8 接口通过解析一个包含 URL 的字符串来创建一个新的 INLINECODEb0977ec6 对象。一旦我们有了这个对象，就可以像访问对象属性一样轻松获取 URL 的各个组成部分，比如 INLINECODE2a9bf822（协议）、INLINECODEd3cc591d（路径名）以及我们最关心的 hostname（主机名）。

> 注意：虽然 INLINECODEaf46b60e 和 INLINECODE05e8775b 看起来很像，但 INLINECODE6dc94757 不包含端口号（如 INLINECODE1eeea210），而 INLINECODE829abd78 包含。通常我们在谈论“域名”时，指的就是 INLINECODE56610a34。

实战示例 1：基础提取

让我们从一个最简单的例子开始。假设我们有一个标准的 HTTPS 链接，我们想要获取 www.example.com。




    
    提取域名示例


    从 URL 获取域名
    原始 URL: https://www.example.com/path/to/resource
    提取结果: 加载中...

    
        // 定义我们的目标 URL
        const urlString = "https://www.example.com/path/to/resource";

        try {
            // 使用 URL 构造函数解析字符串
            const parsedUrl = new URL(urlString);

            // 获取 hostname 属性
            const domain = parsedUrl.hostname;

            // 将结果显示在页面上
            document.getElementById(‘result‘).innerText = domain;
            console.log("提取成功:", domain);
        } catch (error) {
            console.error("URL 格式无效:", error);
            document.getElementById(‘result‘).innerText = "无效的 URL";
        }

实战示例 2：容错处理与默认值

在实际生产环境中，用户输入或 API 返回的数据往往不可靠。如果传入的字符串根本不是一个合法的 URL（例如少了 INLINECODE6457701b，或者格式完全错误），INLINECODEb0ca9982 会直接抛出一个异常。为了避免程序崩溃，我们需要使用 try...catch 块来优雅地处理这些错误。

/**
 * 安全地从 URL 字符串中获取域名
 * 如果 URL 无效，则返回 null
 * @param {string} urlString - 待解析的 URL 字符串
 */
function safeGetDomain(urlString) {
    // 如果输入为空，直接返回 null
    if (!urlString) return null;

    try {
        // 尝试解析 URL
        const urlObject = new URL(urlString);
        return urlObject.hostname;
    } catch (error) {
        // 捕获错误，记录日志，并返回一个备用值
        console.warn(`无法解析 URL: ${urlString}`, error.message);
        return null;
    }
}

// 测试各种情况
console.log(safeGetDomain("https://www.google.com")); // 输出: www.google.com
console.log(safeGetDomain("ftp://files.server.com")); // 输出: files.server.com
console.log(safeGetDomain("这显然不是一个URL"));    // 输出: null (控制台会显示警告)

实战示例 3：处理相对路径与当前页面

有时候，我们可能不直接提供一个完整的 URL，而是想获取当前浏览器地址栏中的域名。利用 INLINECODE614ac4cd 构造函数的特性，如果不传第二个参数，它会报错；但如果我们传入一个相对路径作为第一个参数，并将 INLINECODEfee4f743 作为第二个参数（基准），它就能很好地工作。不过，获取当前页面的域名有更简单的方法。

// 方法 A：直接使用 window.location (最简单)
console.log("当前域名:", window.location.hostname);

// 方法 B：使用 URL 构造函数解析相对路径
const currentUrl = new URL("/some/path", window.location.href);
console.log("基于当前页面的基础域名:", currentUrl.hostname); // 输出与上面相同

实用见解：URL 对象的威力

使用 INLINECODEc9306249 对象不仅仅是获取域名那么简单。它还能让我们轻松地修改 URL 的各个部分。例如，如果你需要将所有的 HTTP 链接升级为 HTTPS，或者提取搜索参数（Query Params），INLINECODEf1d847d1 对象都是最佳选择。

方法二：使用正则表达式（进阶）

虽然 URL API 非常棒，但在某些极端情况下，比如你需要在非常旧的环境（虽然现在很少见）中运行代码，或者你需要从一段混杂着其他文本的复杂字符串中“挖”出 URL，正则表达式就派上用场了。正则表达式给予了我们极高的控制权。

正则表达式解析

我们将使用一个经典的正则模式来匹配域名。让我们来看看这个模式是如何构建的：

const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/i;

让我们拆解一下这个看起来像“乱码”的字符串：

^: 匹配字符串的开头。
INLINECODE19756778: 非捕获组。匹配 INLINECODE36da5b83 或 https://，问号表示这一部分是可选的（即允许不输入协议）。
INLINECODEe0b9aea9: 另一个非捕获组。匹配 INLINECODE595e5d9e，同样也是可选的。
INLINECODE9ea3988f: 这是核心部分。这是一个捕获组，它匹配除了斜杠 INLINECODEf94b4e6d 之外的任何字符。这通常就是我们要找的域名部分。
i: 标志位，表示不区分大小写。

实战示例 4：灵活的字符串提取

下面的代码展示了如何使用这个正则表达式来处理那些可能不包含协议（http://）的 URL 字符串。这种方法非常人性化，因为普通用户在输入网址时经常会省略协议头。




    
    正则提取域名
    
        .container { font-family: sans-serif; margin: 20px; }
        .output { background: #f0f0f0; padding: 10px; border-radius: 5px; margin-top: 10px; }
    


    
        使用正则表达式提取域名
        这种方法可以处理没有 "https://" 前缀的网址。
        
        
    

    
        function extractDomainRegex(url) {
            // 正则说明：
            // 1. ^(?:https?:\/\/)? -> 可选的 http:// 或 https://
            // 2. (?:www\.)? -> 可选的 www.
            // 3. ([^\/]+) -> 捕获组：匹配直到遇到斜杠为止的所有字符
            const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/i;
            const match = url.match(regex);
            
            // 如果匹配成功，返回第一个捕获组（索引1），否则返回 null
            return match ? match[1] : null;
        }

        function testRegex() {
            const urls = [
                "https://www.example.com/path",
                "http://subdomain.example.org",
                "www.google.com/search?q=test", // 注意：没有协议
                "example.net/about"            // 注意：没有 www 和协议
            ];

            let html = "";
            urls.forEach(url => {
                const domain = extractDomainRegex(url);
                html += `输入: ${url} 
 结果: ${domain}

`;
            });
            html += "";

            document.getElementById(‘output‘).innerHTML = html;
        }

实战示例 5：清理多余的“www”

有时候，为了数据的一致性，我们希望提取出的域名不包含 INLINECODE36e757db 前缀。虽然上面的正则可以匹配它，但我们可以通过后续处理将其移除，或者构建一个更复杂的正则。这里我们展示一种更稳健的方法：先用 INLINECODE2433bb68 对象或正则提取，再进行字符串清理。

function cleanDomain(url) {
    let domain;

    // 优先尝试 URL API
    try {
        domain = new URL(url).hostname;
    } catch (e) {
        // 回退到正则
        const match = url.match(/(?:https?:\/\/)?(?:www\.)?([^\/]+)/i);
        domain = match ? match[1] : null;
    }

    if (!domain) return null;

    // 如果域名以 www. 开头，将其替换为空字符串
    if (domain.startsWith("www.")) {
        return domain.slice(4); // 移除前4个字符
    }
    return domain;
}

console.log(cleanDomain("https://www.baidu.com")); // 输出: baidu.com
console.log(cleanDomain("www.sina.com.cn"));      // 输出: sina.com.cn

最佳实践与常见错误

在我们的开发旅程中，正确选择工具是成功的一半。让我们看看在使用这些技术时应该注意什么。

1. 优先选择 URL API

如果你不需要支持非常古老的浏览器（如 IE11），或者不在极端受限的微控制器环境中运行代码，请始终优先使用 INLINECODEcef6d5ef。正则表达式虽然灵活，但很容易因为某些特殊的 URL 格式（如包含端口号、用户名密码 INLINECODE63291e6b、IPv6 地址等）而失效。URL API 是浏览器原生实现的，经过了严格的测试，能够处理所有标准边缘情况。

2. 区分 Hostname 和 Host

这是一个非常容易混淆的点。

hostname: 仅仅是域名。例如 example.com。
host: 域名加上端口号。例如 example.com:8080。

如果你在构建网络请求或配置代理，通常需要 INLINECODEcfabcc9a；但如果你在做域名白名单或 SEO 分析，通常需要 INLINECODE9dd22d3f。使用 URL 对象时，请根据你的具体需求选择正确的属性。

3. 处理 Punycode（国际化域名）

如果 URL 中包含非 ASCII 字符（例如中文域名“http://你好.中国”），INLINECODE39bb067e API 会自动将其转换为 Punycode 格式（以 INLINECODEd138e634 开头）。这是正常的网络标准行为。如果你需要在界面上显示原始的中文域名，需要额外的库（如 punycode）将其转换回来，但这通常超出了简单的“提取”范畴。

4. 验证输入的有效性

永远不要相信用户的输入。即使用户声称他们输入的是 URL，在进行 INLINECODEceb656ba 之前，最好先进行简单的类型检查，确保它是一个字符串。同时，做好捕获 INLINECODEe467019a 的准备，这在处理不可预测的外部链接时尤为重要。

总结与后续步骤

在本文中，我们深入探讨了如何从 URL 中提取域名。我们学习了最现代、最稳健的方法——使用 INLINECODEe7d4e9ac 构造函数，也回顾了在特殊情况下非常有用的正则表达式技巧。我们还讨论了如何清理数据、处理错误以及区分 INLINECODE53dadfbe 和 hostname 的重要性。

掌握了这些技能后，你可以在你的项目中轻松实现：

自动分类外部链接。
基于域名的访问控制逻辑。
更清晰、更友好的 URL 显示逻辑。

下一步，你可以尝试结合这些知识，编写一个通用的 URL 工具类，封装包括提取协议、路径参数、Hash 值在内的所有常用操作，这将极大提升你后续项目的开发效率。希望这篇文章对你有所帮助，祝编码愉快！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客