Question

我有一个正则表达式来从css中获取背景网址：

/(@import.*?)?url\(([^)]+)\)/gi

这适用于大多数情况。然而，野外的CSS是另一回事。即使它无效，我也需要匹配url('/pix/ajax/ajax-loader (2).gif')，以及更像url(/assets/domainsbg@2x-0d8ea9b405f202ff135ced3cdb4658cc.png)的更典型的内容。我已经挖掘了我有限的正则表达能力，可以使用一些帮助。我使用的测试用例是：

background: url('/pix/ajax/ajax-loader (2).gif')
background: url(/pix/ajax/ajax-loader (2).gif)
background: url(/assets/domainsbg@2x-0d8ea9b405f202ff135ced3cdb4658cc.png)
background: url('/assets/domainsbg@2x-0d8ea9b405f202ff135ced3cdb4658cc.png')
background-image: url(file.gif);
background-image: url('file.gif') no-repeat;
background: #FF0000 url( "file.gif" ) no-repeat  ;
background: #FF0000 url( "file%20space.gif" ) no-repeat;

仅供参考我知道正则表达式存在问题，使用它进行解析通常不是最佳解决方案，但在这种情况下，我被卡住了。

Answer 1

以下正则表达式匹配您的所有测试用例：

 url\(.*\)

btw：regexpal是一个很好的网站，可以动态测试你的正则表达式。

Answer 2

var regex = new RegExp(/^\s*background.*:.*url\((.+)\)/i);
console.log(regex.exec("background: url('/pix/ajax/ajax-loader (2).gif')")[1]);

HTH

Answer 3

这非常不优雅，但它应该可以在没有分隔符的情况下提取URL（即没有任何单引号或双引号）：

url\((?:(?:\s*(?:'([^']+)'|"([^"]+)")\s*)|([^)]+))\)

您可以为小组$1，$2或$3提取任何非空白匹配。

这适用于除此之外的所有示例：

background: url(/pix/ajax/ajax-loader (2).gif)

但是有充分的理由，因为那个语法无效。

Javascript Regex - 嵌套时匹配左右括号

3 个答案: