正则表达式:匹配GitHub markdown中的图片URL?

时间:2018-08-05 05:28:11

标签: javascript regex github markdown

这可能是一个非常简单的问题,但是我对正则表达式感到厌烦。

我想匹配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]);
}

很显然,这个正则表达式是一团糟。我只是想证明我要做什么。

任何帮助将不胜感激!

4 个答案:

答案 0 :(得分:1)

我无法理解您真正想做的事情,但是您期望的正则表达式是这样的:

\!\[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

答案 1 :(得分:1)

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

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

如果您只想要图像URL,则可以使用以下网址:

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

答案 2 :(得分:1)

尝试以下模式:\((?P<filename>.+?(\.png|\.jpg|\.jpeg|\.bmp))

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

说明:

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

Demo

编辑

OP:我只是想知道是否可以匹配整个文件名而没有其他内容?

答案:是的,只需使用以下模式:(?<=\().+(\.png|\.jpg|\.jpeg|\.bmp),后面有正面表情。

Demo

答案 3 :(得分: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]);
}