Question

应该无处不在:)

但特别是那些我觉得棘手的人：

<div style="background-image:url('img.png');"></div>
<div style='background-image:url("img.png");'></div>
<div style='background-image:url(img.png);'></div>
<div style='background-image:url(../../img.png);'></div>
<div style='background:  #ffffff   url( "img.png" )   no-repeat right top;'></div>

注意：应该使用JavaScript。

Answer 1

如果您想要在url( ... )

内找到任何内容

url\(\s*(['"]?)(.*?)\1\s*\)

url    # literal characters 
\(     # escaped left parenthesis to treat it as literal
\s*    # 0 or more white-space characters
(      # 1st capture group
 ['"]? # either ' or " or neither
)      # end 1st capture group
(.*?)  # 2nd (main) capture group, any characters, reluctantly
\1     # back-reference group #1, to ensure that same quote type is used at end
\s*    # 0 or more white-space characters
\)     # escaped right parenthesis to treat it as literal

http://rubular.com/r/P6FJwxC0L7

如果您只想在每个url( ... .png)

中包含.png文件

url\(\s*(['"]?)(.*?\.png)\1\s*\)

编辑：允许空格，并删除无用的反向引用

Answer 2

我认为你应该以某种方式得到style属性的内部文本，然后使用以下正则表达式：

background-image:(?: )*url\((?:'|")?([^'"]*)(?:'|")?\);

唯一匹配的组将是背景图片网址的内容，没有可选的引号和/或尾随引号（"或'）

Answer 3

这应该有效\\(['"]?([\w./]+)

Answer 4

另一种方法是在url(和可能的空格或引号\burl\( *['"]?之后锚定匹配的开头，并匹配后面的所有内容，直到找到空格，引号或左括号{ {1}}。

([^'" )]+)

用`||编写[]``最后允许不匹配返回undefined而不是抛出错误。

Answer 5

我首先使用简单模式匹配网址/url\([^(]+\)/ig，然后从结果中删除所有不必要的符号：

var matches = html.match(/url\([^(]+\)/ig);
for(var i = 0; i < matches.length; i++)
    // this is a clean url
    var url = matches[i].replace(/(^url\s*\(\s*['"]?)|(['"]?\s*\)$)/ig, '');

您可以在jsfiddle上找到完整的代码段。

正则表达式匹配内联样式中的url（）<div style =“url（）”> </div>

5 个答案: