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

Matching background-image URLs with regular expressions

本文关键字：正则表达式 URL 背景 图像      更新时间：2023-09-26

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

到目前为止，以下是我所拥有的，它非常适用于没有任何parens的URL：

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

但是，如果文件名中有一个带括号的url，例如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)['|"]?')，但想知道是否有一种方法可以做到这一点，而不必将扩展名列入白名单。

我面临的一些限制：

  1. 我不能假设background-image: url(...)声明会被;正确地终止
  2. 我不能假设background-image: url(...)将URL用引号括起来——它可以不加引号，可以使用单引号（'）或双引号（"）

您可以使用此模式，因为您确信url总是在一行上：

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

请注意，您可以在一次拍摄中完成此替换，如下所示：

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

您可以执行类似的操作

查找：

 #  /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) + ")"

这里有一个regex，它处理URL列表和URL中的逗号。

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

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

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

相关文章：