代码之家 › 专栏 › 技术社区 › MysteryPancake

Regex:匹配GitHub标记中的图像URL?

markdown github regex javascript

-1

MysteryPancake · 技术社区 · 8 年前

这可能是一个很简单的问题,但我在regex很糟糕。

我想匹配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文件,如果可能的话(包括?原始=真)。

我不知道这是否可能,但因为我使用的是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]);
}

显然,这个regex是一个巨大的混乱。我只是想证明我在做什么。

任何帮助都将不胜感激!

4 回复 | 直到 8 年前

1

The fourth bird 8 年前

你可以先匹配 ![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]);
}

2

1

James Skirving 8 年前

这将抓取类似“icon.png”的字符串?raw=true'并将其放入第一个捕获组

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

如果您只需要图像URL,可以使用以下内容:

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

3

1

MichaÅ Turczyn 8 年前

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

正在捕获名为 filename 将包含文件名。

说明:

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

Demo

编辑 :

操作: 我只是想知道是否可以匹配整个文件名而不匹配其他文件名?

答:是的,就用这个模式: (?<=\().+(\.png|\.jpg|\.jpeg|\.bmp) 带着积极的眼光。

Demo

4

1

Black Mamba 8 年前

我无法理解您真正想要做什么,但是regex的预期是这样的:

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