使用正则表达式从img标签中解析出图片名称

Question

我有一个 <img> 标签位于一个 div 中，我想通过 javascript 和正则表达式获取图片名称。

现在，我已经成功地将 <img> 标签作为字符串获取了。

var bigImage = $(this).find('.img-container img')
var bigImageSrc = bigImage[0].src
var regx = /g\bplaceholderdefault\.jpg?\b/g
var match = bigImageSrc.match(regx)

我想用这个表达式来查看字符串中是否存在placeholderdefault.jpg。

顺便说一下，bigImageSrc返回一个有效的字符串，我用typeof进行了检查。

现在的问题是，即使bigImageSrc的值为http://localhost/yogurtbar/images/slider/placeholderdefault.jpg，它仍然返回null。

我不明白为什么它不能检测到字符串中的placeholderdefault.jpg。我在Regexr上尝试（并生成）了这个正则表达式，并且它是有效的。

我的代码有什么问题吗？

- Burning Crystals

---

placeholderdefault.jpg 不等于 placeholder-default.jpg。 - Shaunak D

文件名中应该加破折号还是不加？ - ekuusela

嗯，抱歉我误解了，图片中没有破折号。尽管如此，它仍然无法正常工作。 - Burning Crystals

你为什么要写 jpg？你真的想让 g 可选吗？ - nhahtdh

Answer 1

不需要使用 正则表达式。

你可以使用 indexOf。相比于正则表达式，这样会运行得更快：

if (bigImageSrc.indexOf('placeholderdefault.jpg') > -1) {
    // Present

如果您想使用正则表达式进行检查：

if (/placeholderdefault\.jpg/.test(bigImageSrc)) {
    // Present
}

你需要转义.

- Tushar

---

我觉得你在正则表达式中必须转义“.”。 - Vinod Kumar

Answer 2

你需要删除开头的 g。

var regx = /g\bplaceholderdefault\.jpg?\b/g;
            ^
            |

由于在占位符中 p 之前没有字符 g 存在，您的正则表达式无法找到匹配项。

正确的写法应该是：

var regx = /\bplaceholderdefault\.jpg?\b/g;

另外，我认为您想匹配jpg和jpeg格式。

var regx = /\bplaceholderdefault\.jpe?g\b/g;

- Avinash Raj

---

开头的 g 是什么意思？我只是从一个网站生成了这段代码，所以我不完全理解它。 - Burning Crystals

Answer 3

简单的方法是使用split()获取图像名称

var bigImageSrc = 'http://localhost/yogurtbar/images/slider/placeholder-default.jpg';    
var filename = bigImageSrc.split("/").pop();

 console.log(filename);
 //output placeholder-default.jpg

- Saqueib