正则表达式匹配 URL 的使用方法-QQ沐编程

正则表达式（Regex）是一种用于文本匹配和处理的强大工具。在实际开发中，我们经常需要用正则表达式来验证 URL 是否符合某种标准格式。这个教程将带你一步一步构建一个正则表达式，能够匹配常见的 URL 格式，包括协议、主机名、端口号、路径、查询字符串等。

下面是一个关于 如何使用正则表达式匹配 URL 的教程。我们将从基础开始，逐步介绍正则表达式的构建思路，以及如何创建一个强大的正则表达式来匹配 URL。

URL 的基本组成部分

一个 URL 通常包括以下几个部分：

协议://域名:端口/路径?查询#片段

协议：如 http、https、ftp 等。
域名：如 www.example.com，也可以是 IP 地址，如 192.168.1.1，或者特殊的 localhost。
端口号：如 :8080，如果没有指定端口，则默认为 80（HTTP）或 443（HTTPS）。
路径：如 /path/to/resource。
查询字符串：如 ?query=1&sort=desc。
片段标识符：如 #section。

正则表达式构建步骤

协议部分

URL 的协议部分通常是 http、https 或 ftp，它们后面跟着 ://，所以我们需要先匹配这些协议：

^(https?|ftp)://

^ 表示匹配字符串的开始。
(https?|ftp) 匹配 http、https 或 ftp，其中 ? 表示 s 是可选的。
:// 匹配 ://，它是协议和域名之间的分隔符。

主机名部分

接下来，我们需要匹配域名部分。域名可以是字母、数字、连字符（-）和点（.）组成的字符。我们可以使用以下正则表达式来匹配主机名：

([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}

([a-zA-Z0-9-]+\.)+ 匹配域名的每一部分，允许多个子域名（如 www、api 等）。[a-zA-Z]{2,6} 匹配顶级域名（如 .com、.org 等），它的长度通常是 2 到 6 个字母。

端口号部分（可选）

URL 中的端口号是可选的。端口号通常紧跟在域名后，以冒号（:）开头。我们可以通过以下正则来匹配端口号：

(:\d+)?

(:\d+)? 匹配可选的端口号，: 后面跟着一个或多个数字。
? 表示这个端口号是可选的。

路径部分（可选）

路径部分是 URL 中以 / 开头的一部分，可以包含字母、数字、斜杠（/）、点（.）等字符。我们可以使用如下正则来匹配路径：

(/[\w\-\.\/?&%#=]*)?

\/ 匹配斜杠 /。
[\w\-\.\/?&%#=]* 匹配路径中的字母、数字、连字符、点、斜杠、问号、百分号、井号等字符。
? 表示路径部分是可选的。

完整的正则表达式

将上述各部分组合起来，我们可以构建一个完整的正则表达式来匹配 URL：

\b(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}|\b(?:https?|ftp):\/\/(?:\d{1,3}\.){3}\d{1,3}|\b(?:https?|ftp):\/\/localhost(?::\d+)?(?:\/[^\s]*)?\b

表达式解释：

(?:https?|ftp) 匹配 http、https 或 ftp 协议。
:\/\/ 匹配协议和域名之间的 ://。
(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6} 匹配主机名，支持域名和 IP 地址。
(?:\d{1,3}\.){3}\d{1,3} 匹配 IP 地址（如 192.168.1.1）。
localhost 匹配 localhost，支持本地开发环境。
(?::\d+)? 匹配可选的端口号部分。
(?:\/[^\s]*)? 匹配可选的路径、查询字符串和片段标识符。

如何使用正则表达式

在 JavaScript 中，你可以使用 RegExp 来匹配 URL。例如，使用下面的代码测试一些 URL：

const regex = /\b(?:https?|ftp):\/\/(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}|\b(?:https?|ftp):\/\/(?:\d{1,3}\.){3}\d{1,3}|\b(?:https?|ftp):\/\/localhost(?::\d+)?(?:\/[^\s]*)?\b/;
const testUrls = [
    'http://www.example.com',
    'https://example.com:8080/path/to/resource',
    'ftp://ftp.example.com/file.txt',
    'https://localhost:3000/path',
    'http://192.168.1.1:8080/',
    'https://example.com:443/',
    'http://example.com',   // should match
    'htt://www.example.com',   // should not match
    '://example.com'           // should not match
];
testUrls.forEach(url => {
    console.log(`${url} : ${regex.test(url)}`);
});