Question

我正试图从CSS文本块中提取绝对URL，并用JavaScript中的相对版本替换它们。

这是我到目前为止的内容，它适用于没有任何内容的网址：

var relativeCss = originalCss.replace(/url\(['|"]?(http[^\)|^'|^"]+)['|"]?\)/g, function(fullMatch, fullUrl) {
    var fileName = fullUrl.substr(fullUrl.lastIndexOf('/') + 1);
    return 'url("' + fileName + '")';
});

但是，如果有一个带有括号的网址作为文件名的一部分，例如background-image: url(http://uploads.server.com/IMG_0445 (2).jpg);，然后贪婪的正则表达式通过停止它找到的第一个paren而失败。

这是一个简单的测试用例：http://jsfiddle.net/NHfCg/1，输出应为：

.rule1 { background-image: url("image1.png"); } 
.rule2 { background-image: url("IMG_0445 (2).jpg"); }

我可以编写一个更长的正则表达式来查找要终止的特定文件扩展名（例如.(png|jpg|jpeg)['|"]?\)，但是想知道是否有办法在没有白名单扩展名的情况下执行此操作。

我面临的一些限制：

我不能认为background-image: url(...)

;

我不能假设background-image: url(...)会在引号中包含网址 - 它可能是不加引号的，可以使用单引号（'）或双引号（"）。

Answer 1

您可以使用此模式，因为您确定该网址始终位于一行：

/\burl\s*\(\s*["']?([^"'\r\n,]+)["']?\s*\)/gi

请注意，您可以像这样一次性更换：

var relativeCss = originalCss.replace(/\burl\s*\(\s*["']?http:\/\/((?:[^"'\r\n\/,]+)\/?)+["']?\s*\)/i, 'url("$1")');

Answer 2

你可以做这样的事情

查找：

 #  /url\(\s*(["']?)\s*([^{}]*\.[a-zA-z]{2,3})\s*\1\s*\)/

 url
 \(

 \s* 
 ( ["']? )             # (1)
 \s* 
 (                     # (2 start)
      [^{}]*                # not {} so not to overrun
      \. [a-zA-z]{2,3}      # image file extension
                            # (comment this out if no file extension is possible)
 )                     # (2 end)
 \s* 
 \1                    # backref to grp 1
 \s* 

 \)

替换：

 "url(" + transformed($2) + ")"

Answer 3

这是一个正则表达式，它处理网址中的网址和逗号列表。

/\burl\s*\(\s*["']?([^"'\r\n\)\(]+)["']?\s*\)/gi

在URL中允许使用逗号，并在dataURI中使用逗号将资源元数据与base64编码数据流分开。

你可以在这里看到它是如何工作的： http://regex101.com/r/eT7zN6

将背景图像URL与正则表达式匹配

3 个答案: