Javascript正则表达式从css中提取图像名称答案

【问题标题】：Javascript regex extract image name from cssJavascript正则表达式从css中提取图像名称
【发布时间】：2017-05-30 12:03:44
【问题描述】：

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

要求

以网址开头
后跟括号
括号内可选引号
位置可以有路径信息
以 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' 组，当文件名包含数字或字符（如 $）时，它会中断。有人可以提出更好的解决方案吗？

【问题讨论】：

您可以发布一个示例网址进行检查吗？
而不是/w，您可以使用[^\'\"]（否定的单引号和双引号集以匹配除结尾之外的所有内容

标签： javascript regex

【解决方案1】：

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

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)

【讨论】：

啊不幸的是 rab$it.png 失败了 ;(
@tBook 现在尝试它包括rab$it.png 完全。
非常感谢 Abhishek Gurjar，它做到了！只是为了学习，如果它不难。您是否看到了一种在文件名之前捕获文件路径作为组的方法，f.e. $0 ->../animal/ $1 -> cow.jpg ?

【解决方案2】：

希望你喜欢这个：

var rx = /([^\/('"\\]+)\.(jpg|png|jpeg|gif)/i

在方括号中我把所有不应该出现在图像名称中的字符/, \, ', ", (你可以根据需要添加或删除。

【讨论】：

【解决方案3】：

试试这个：

(.*\/)?(.*?.(png|jpg|jpeg|gif)$)

第二组将是图像名称

【讨论】：

【解决方案4】：

试试这个：

var string = `behavior: url(#default#VML);
background-image: url(home_bbbbbb_14.ttf);
background-image: url('home.ttf');
background-image: url('home.png');
background-image: url(images/home_bbbbbb_14.png);
background-image: url('images/home_bbbbbb_14.jpeg');
background-image: url("images/home_bbbbbb_14.png");
background-image: url(home_bbbbbb_14.png);
background-image: url('home_bbbbbb$_14.png');
background-image: url("home_bbbbbb_14.png");
background-image: url("../img/home_bbbbbb_14.png");
background-image: url("./img/home_bbbbbb_14.png");
background-image: url("../../img/home_bbbbbb_14.jpg");
url("images/animated-overlay.gif");
url("images/ui-bg_flat_75_ffffff_40x100.png");
url('select2.png');
url(select2x2.png);
url('../images/back_enabled.png');
url('../pic/back_enabled.png');`

var result = string.match(/(?!url)([^\/('"\\]+)\.(?=png|jpg|gif|jpeg)('|"|)\w+/g)

console.log(result)

【讨论】：