如何编写匹配 URL 的正则表达式？

javascript

2024-03-03 22:20:57

匹配 URL 的正则表达式：终极指南

简介

正则表达式是强大工具，在匹配文本中特定模式时不可或缺。其中，匹配 URL 是常见任务，需要对 URL 的结构有深刻理解。

URL 的结构

URL 由以下元素组成：

协议（可选）： 通信协议，如 http。
主机名： 网站名称，如 www.google.com。
端口号（可选）： 连接主机名的特定端口。
路径（可选）： 网站上的特定资源，如 /index.html。
查询参数（可选）： 传递附加信息的键值对，如 ?q=search+term。
片段标识符（可选）： 指向文档中特定部分的锚点，如 #section-1。

编写匹配 URL 的正则表达式

基于 URL 结构，我们设计如下正则表达式：

^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$

正则表达式元素

^：匹配字符串开头。
(?:)：非捕获组，不存储匹配内容。
([A-Za-z]+)：协议，一个或多个字母。
(:):：协议与主机名间的冒号。
(\/{0,3}): 主机名前的斜杠，最多三个。
([0-9.\-A-Za-z]+)：主机名，数字、句点、连字符、字母。
(?::(\d+))?: 可选端口号，一个或多个数字。
(?:\/([^?#]*))?: 可选路径，不含问号或哈希符号。
(?:\?([^#]*))?: 可选查询参数，不含哈希符号。
(?:#(.*))?: 可选片段标识符，哈希符号后的字符。
`【: 匹配字符串结尾。

代码示例

以下代码示范如何使用正则表达式匹配 URL：

var urlR = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url= content.match(urlR);

if (url) {
  // 提取匹配的 URL 组件
  var protocol = url[1];
  var hostname = url[3];
  var port = url[4];
  var path = url[5];
  var queryParams = url[6];
  var fragment = url[7];
}