javascript - 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];