RegEx从CSS背景样式中提取URL

Question

我有一个这种形式的字符串:

url("http://www.example.com/imgs/backgrounds/bg80.jpg") repeat scroll 10% 0% transparent

这是来自某个元素的CSS样式,目前在页面上看不到.我需要做的是预加载背景图像,但要做到这一点,我需要它的URL,我正在尝试编写正则表达式找到它.

我所知道的http://www.example.com/imgs/backgrounds/部分保持不变,唯一改变的是图像的名字本身,它可以与任何一端.jpg或.png.

这是一次尝试:

(http:\/\/www.example.com\/imgs\/backgrounds\/)[\w\.\-]*

这个问题是只有http://www.example.com/imgs/backgrounds/部件被拾起.所以我尝试了这个,但这根本不起作用!

(http:\/\/www.example.com\/imgs\/backgrounds\/)[\w\.\-]*(.jpg|.png)

我究竟做错了什么？感谢您的任何帮助!

Answer 1

后缀url可以在括号内的url周围有'或"没有

有效的网址

• url("http://www.example.com/imgs/backgrounds/bg80.jpg")
• url('http://www.example.com/imgs/backgrounds/bg80.jpg')
• url(http://www.example.com/imgs/backgrounds/bg80.jpg)

因此,对于您可以使用的通用解决方案

var background = 'url("http://www.example.com/imgs/backgrounds/bg80.jpg") repeat scroll 10% 0% transparent',
    reg = /(?:\(['"]?)(.*?)(?:['"]?\))/,
    extracterUrl = reg.exec(background)[1];

Answer 2

只需捕捉(和之间的任何东西)

var url = str.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var image = new Image();
image.src = url;

小提琴