javascript - Javascript正则表达式从CSS提取图像名称

使用javascript正则表达式，我试图获取图像名称和扩展名作为css属性的捕获组。

要求


以url开头
后跟方括号
括号内的可选引号
位置可以有路径信息
以jpeg或jpg或gif或png结尾


例：

behavior: url(#default#VML);                   -> ignored wrong ending
background-image: url(dog.ttf);                -> ignored wrong ending
background-image: url('cat.png');              -> cat.png
background-image: url(bird.gif);               -> bird.gif
background-image: url('../monkey.png');        -> monkey.png
background-image: url('../../rab$bit.png');    -> rab$bit.png
background-image: url('../animal/cow.jpg');    -> cow.jpg

这是我到目前为止的内容：

url(?:\(\"|\(\'|\(\/?.*\/|\()(\.+)?(\/.*\/)?(\w*)+(.png|.jpg|.gif|.jpeg)

https://regex101.com/r/3mMdTI/6

不幸的是，由于'\ w'组，当文件名包含数字或$之类的字符时，这会中断。有人可以提出更好的解决方案吗？

最佳答案

我假设您要求的图像名称仅具有格式而不是路径和其他内容。

var string = `behavior: url(#default#VML);
background-image: url(dog.ttf);
background-image: url('cat.png');
background-image: url(bird.gif);
background-image: url('../monkey.png');
background-image: url('../../rab$bit.png');
background-image: url('../animal/cow.jpg');`

var result = string.match(/[\w\.\$]+(?=png|jpg|gif)\w+/g)

console.log(result)