JavaScript 正则表达式 URL

JavaScript 正则表达式在处理 URL 时非常有用，可以从 URL 中提取出有用的信息，例如协议、主机名、端口、路径和查询参数等。

匹配 URL

以下是一个基本的正则表达式，它可以匹配 URL 中的协议、主机名、端口、路径和查询参数：

const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(:[\d]{2,5})?([\/\w.-]*)*\/?(\?([\w-]+=[\w%]+&)+([\w-]+=[\w%]+))?$/i;

这个正则表达式使用^和 $来匹配整个字符串。它开始匹配协议，然后是主机名，使用([\da-z.-]+)表示数字、字母、点和短划线的字符集。然后是域名后缀，使用([a-z.]{2,6})表示 2 到 6 个字母或点。接着是可选的端口，使用(:[\d]{2,5})?表示 : 后跟 2 到 5 个数字。然后是路径，使用([\w\/.-]*)*\/?表示 0 个或多个单词字符、斜杠、点或短横线，最后是查询参数，使用 (\?([\w-]+=[\w%]+&)+([\w-]+=[\w%]+))?表示以 ? 开头，然后是至少一个参数名和值，用 & 分隔。

提取 URL 的部分

如果你只想提取一个 URL 的某些部分，可以使用正则表达式的捕获组来实现。以下是匹配 URL 的捕获组：

const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})(:[\d]{2,5})?([\/\w.-]*)*\/?(\?([\w-]+=[\w%]+&)+([\w-]+=[\w%]+))?$/i;

const url = 'https://www.example.com:1234/foo/bar?param1=value1&param2=value2';

const urlParts = url.match(urlRegex);

// urlParts 数组包含如下内容：
// [0] 匹配整个 URL
// [1] 匹配协议，'https://'，可选
// [2] 匹配主机名，'www.example.com'
// [3] 匹配域名后缀，'.com'
// [4] 匹配端口，':1234'，可选
// [5] 匹配路径，'/foo/bar'
// [6] 匹配查询参数，'?param1=value1&param2=value2'，可选
// [7] 相同的查询参数，以 '&param=' 开头
// [8] 最后一个查询参数，'param2=value2'

在这个示例中，urlParts 数组包含了 URL 的每个部分，你可以使用它们来自定义 URL。

总结

JavaScript 正则表达式在处理 URL 时非常强大。你可以使用它们来匹配 URL，或者提取 URL 的不同部分。有了这些技巧，你可以轻松处理涉及 URL 的 Web 开发任务。