使用正则表达式从img标记解析图像名称

Question

我在div中有一个<img>标记，我想通过javascript和regex获取图像名称。

现在，我成功地将<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中尝试（并制作）了这个正则表达式，但它确实有效。

我的代码中出错了什么？

Answer 1

不需要regex。\

您可以使用indexOf。与regex相比，这会更快：

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

如果您想使用regex检查：

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

您需要转义.

Answer 2

您需要删除开头的g。

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

由于g（占位符）之前不存在charcater p，因此您的正则表达式无法找到匹配项。

正确的是，

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

此外，我认为您希望同时匹配jpg和jpeg格式。

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

Answer 3

简单的方法是使用split()

获取图像名称

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;