正则表达式：在 GitHub 降价中匹配图像 URL？答案

【问题标题】：Regex: Match image URL in GitHub markdown?正则表达式：在 GitHub 降价中匹配图像 URL？
【发布时间】：2019-01-12 11:15:57
【问题描述】：

这可能是一个非常简单的问题，但我不擅长正则表达式。

我想匹配 GitHub markdown 中的图片，例如：

![Icon](icon.png?raw=true)
![Icon](icon.jpg?raw=true)
![Icon](thumb.jpg?raw=true)
![Icon](icon512.png?raw=true)
![Icon](android-chrome-512x512.png?raw=true)

我正在尝试匹配以下内容：

icon.png?raw=true
icon.jpg?raw=true
thumb.jpg?raw=true
icon512.png?raw=true
android-chrome-512x512.png?raw=true

如果可能的话，我正在尝试仅匹配 .jpg 和 .png 文件（包括 ?raw=true）。

我不知道这是否可能，但由于我使用的是 Javascript 的 match 函数，因此如果只有一个匹配项会非常有帮助，以避免像下面这样对匹配项进行索引：

编辑：这是一些上下文，这就是我正在尝试的：

var paths = [
  "![Icon](icon.png?raw=true)",
  "![Icon](icon.jpg?raw=true)",
  "![Icon](thumb.jpg?raw=true)",
  "![Icon](icon512.png?raw=true)",
  "![Icon](android-chrome-512x512.png?raw=true)"
]

for (var i = 0; i < paths.length; i++) {
  console.log(paths[i].match(/(?<=\!\[Icon]\()(.*)(?=\))/g)[0]);
}

显然，这个正则表达式是一团糟。我只是为了展示我正在尝试做的事情。

任何帮助将不胜感激！

【问题讨论】：

有没有尝试自己写任何东西？发布您尝试过的代码
@CertainPerformance 用我糟糕的正则表达式更新了帖子

标签： javascript regex github markdown

【解决方案1】：

您可以先匹配![Icon](，然后在第 1 组中捕获括号之间的内容，最后再次匹配右括号。

!\[Icon\]\((.+?\.(?:png|jpg)[^)]*)\)

!\[Icon\] 匹配！[图标]
\(匹配左括号
( 捕获组，其中将包含您要匹配的值
- .+? 匹配任意字符一次或多次非贪婪
- \.匹配一个点
- (?:png|jpg) 将匹配 png 或 jpg 的非捕获组
- [^)]* 将匹配零次或多次而不是右括号的否定字符类
)关闭捕获组
\) 匹配右括号

var paths = [
  "![Icon](icon.png?raw=true)",
  "![Icon](icon.jpg?raw=true)",
  "![Icon](thumb.jpg?raw=true)",
  "![Icon](icon512.png?raw=true)",
  "![Icon](android-chrome-512x512.png?raw=true)"
];

for (var i = 0; i < paths.length; i++) {
  console.log(paths[i].match(/!\[Icon\]\((.+?\.(?:png|jpg)[^)]*)\)/)[1]);
}

更新：

要仅使用正向后视匹配 png 和 jpg，您可能会使用：

(?<=!\[Icon]\().*?\.(?:png|jpg)(?=[^)]*\))

var paths = [
  "![Icon](icon.png?raw=true)",
  "![Icon](icon.jpg?raw=true)",
  "![Icon](thumb.jpg?raw=true)",
  "![Icon](icon512.png?raw=true)",
  "![Icon](android-chrome-512x512.png?raw=true)"
];

for (var i = 0; i < paths.length; i++) {
  console.log(paths[i].match(/(?<=!\[Icon]\().*?\.(?:png|jpg)(?=[^)]*\))/g)[0]);
}

【讨论】：

非常感谢！我赞成所有答案，我不知道谁反对。这似乎工作得很好，但我只是想问是否可以避免组匹配，只匹配 URL？当我使用 Javascript 测试表达式时，match 函数会返回匹配组和完整匹配。如果我用 [0] 索引返回的值，它会起作用，但我只是希望有办法解决这个问题
您可以使用带有正面后视的版本(?<=!\[Icon]\().*?(?=\))。在此版本中，(.*) 更改为 .*?，因为您不需要匹配的捕获组，现在匹配第一个右括号是非贪婪的。请注意，并非所有浏览器都支持正向回溯。
非常感谢，这正是我想要的！请将此添加为答案，以便我接受。另外，我不知道这是否可能，但是否可以让它只匹配 .jpg 和 .png？
@MysteryPancake 这是可能的。我已为我的答案添加了更新。
当然，您可以在匹配 jpg 或 png 后使用否定字符类 [^)]* 以匹配不匹配右括号 (?<=!\[Icon]\().*?\.(?:png|jpg)[^)]*(?=\))

【解决方案2】：

这将抓取像 'icon.png?raw=true' 这样的字符串并将其放在第一个捕获组中

!\[Icon\]\((.+)\)

如果你只想要图片 URL，你可以使用这个：

!\[Icon\]\((.+\.\w+).*\)

【讨论】：

【解决方案3】：

试试这个模式：\((?P<filename>.+?(\.png|\.jpg|\.jpeg|\.bmp))。

名为filename 的捕获组将包含文件名。

解释：

首先，将( 与模式\( 匹配。然后，开始命名捕获组：任何字符一次或多次，非贪婪，直到某个图像扩展名.+?(\.png|\.jpg|\.jpeg|\.bmp)。非贪婪很重要，因为如果该文件后面跟着另一个扩展名为 on 的文件名，它将匹配到第二个文件。

Demo

编辑：

OP：我只是想知道是否可以匹配整个文件名而不匹配其他内容？

回答：是的，只需使用此模式：(?<=\().+(\.png|\.jpg|\.jpeg|\.bmp) 并积极向后看。

Demo

【讨论】：

谢谢！我只是想知道是否可以匹配整个文件名而不匹配其他内容

【解决方案4】：

我无法理解您真正想要做什么，但您所期望的正则表达式是这样的：

\!\[Icon\]\(((?:.*)\.(?:png|jpg).*)\)

这将获得带有扩展名和 ?raw=true 或仅附加到其上的图像：

icon.png?raw=true icon.jpg?raw=true thumb.jpg?raw=true icon512.png?raw=true android-chrome-512x512.png?raw=true

【讨论】：

谢谢！我只是想知道是否可以匹配整个文件名而不匹配其他任何内容（包括 ?raw=true）
更新答案请查收
感谢您所做的所有工作！对此我深表歉意，但我还有一个要求：是否可以只匹配一件事？当我使用 Javascript 测试表达式时，match 函数会返回匹配组和完整匹配。如果我用 [0] 索引返回的值，它会起作用，但我只是希望有办法解决这个问题
您在这里否决了所有其他答案？似乎是这样，您的答案是唯一没有被否决的答案，而您今天投了三票。另外，您的答案与@Thefourthbird 的答案非常相似。
@MichałTurczyn 支持所有答案希望您知道，经过 1 小时的投票后，它们无法更改。