我有一个网络服务，可以重写 css 文件中的 url，以便可以通过 CDN 提供它们。

css 文件可以包含图像或字体的 url。

我目前有以下正则表达式来匹配 css 文件中的所有 url:

(url\(\s*([\'\"]?+))((?!(https?\:|data\:|\.\.\/|\/))\S+)((\2)\s*\))

但是，我现在想引入对自定义字体的支持，并且需要在 @font-fontface 中定位 url:

@font-face {
  font-family: 'FontAwesome';
  src: url("fonts/fontawesome-webfont.eot?v=4.0.3");
  src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

然后我想到了以下内容:

@font-face\s*\{.*(url\(\s*([\'\"]?+))((?!(https?\:|data\:|\.\.\/|\/))\S+)((\2)\s*\))\s*\}

问题是这会匹配所有内容而不仅仅是里面的 url。我想我可以像这样使用 lookbehind:

(?<=@font-face\s*\{.*)(url\(\s*([\'\"]?+))((?!(https?\:|data\:|\.\.\/|\/))\S+)((\2)\s*\))(?<=-\s*\})

不幸的是，PCRE(PHP 使用的)不支持 lookbehind 中的变量重复，所以我被卡住了。

我不希望通过扩展名检查字体，因为某些字体具有 .svg 扩展名，这可能与具有 .svg 扩展名的图像冲突。

此外，我还想修改我原来的正则表达式以匹配所有其他不在 @font-face 中的 url:

.someclass {
  background: url('images/someimage.png') no-repeat;
}

由于我无法使用后视，我如何从 @font-face 和不在 @font-face 中的那些中提取 url ？

最佳答案

_{Disclaimer : You're maybe off using a library, because it's tougher than you think. I also want to start this answer on how to match URL's that are not within @font-face {}. I also suppose/define that the brackets {} are balanced within @font-face {}.
Note : I'm going to use "~" as delimiters instead of "/", this will releave me from escaping later on in my expressions. Also note that I will be posting online demos from regex101.com, on that site I'll be using the g modifier. You should remove the g modifier and just use preg_match_all().
Let's use some regex Fu !!!}

第 1 部分:匹配不在 @font-face 中的 url {}

1.1 匹配@font-face {}

哦，是的，这听起来可能很“奇怪”，但您稍后会注意到原因 :)
我们在这里需要一些递归正则表达式:

@font-face\s*    # Match @font-face and some spaces
(                # Start group 1
   \{            # Match {
   (?:           # A non-capturing group
      [^{}]+     # Match anything except {} one or more times
      |          # Or
      (?1)       # Recurse/rerun the expression of group 1
   )*            # Repeat 0 or more times
   \}            # Match }
)                # End group 1

demo

1.2 转义@font-face {}

我们将在前一个正则表达式之后使用 (*SKIP)(*FAIL)，它会跳过它。参见 this answer了解它是如何工作的。

demo

1.3 匹配url()

我们将使用这样的东西:

url\s*\(         # Match url, optionally some whitespaces and then (
\s*              # Match optionally some whitespaces
("|'|)           # It seems that the quotes are optional according to http://www.w3.org/TR/CSS2/syndata.html#uri
(?!["']?(?:https?://|ftp://))  # Put your negative-rules here (do not match url's with http, https or ftp)
(?:[^\\]|\\.)*?  # Match anything except a backslash or backslash and a character zero or more times ungreedy
\2               # Match what was matched in group 2
\s*              # Match optionally some whitespaces
\)               # Match )

请注意，我使用的是 \2，因为我已将其附加到之前的第 1 组正则表达式中。
Here是 ("|')(?:[^\\]|\\.)*?\1 的另一种用法。

demo

1.4 匹配url()里面的值

您可能已经猜到我们需要使用一些 lookaround-fu，问题在于 lookbehind，因为它需要固定长度。我有一个解决方法，我将向您介绍 \K 转义序列。它将比赛的开始重置为 token 列表中的当前位置。 ^more-info
好吧，让我们将 \K 放在表达式中的某处并使用前瞻，我们最终的正则表达式将是:

@font-face\s*    # Match @font-face and some spaces
(                # Start group 1
   \{            # Match {
   (?:           # A non-capturing group
      [^{}]+     # Match anything except {} one or more times
      |          # Or
      (?1)       # Recurse/rerun the expression of group 1
   )*            # Repeat 0 or more times
   \}            # Match }
)                # End group 1
(*SKIP)(*FAIL)   # Skip it
|                # Or
url\s*\(         # Match url, optionally some whitespaces and then (
\s*              # Match optionally some whitespaces
("|'|)           # It seems that the quotes are optional according to http://www.w3.org/TR/CSS2/syndata.html#uri
\K               # Reset the match
(?!["']?(?:https?://|ftp://))  # Put your negative-rules here (do not match url's with http, https or ftp)
(?:[^\\]|\\.)*?  # Match anything except a backslash or backslash and a character zero or more times ungreedy
(?=              # Lookahead
   \2            # Match what was matched in group 2
   \s*           # Match optionally some whitespaces
   \)            # Match )
)

demo

1.5 在PHP中使用模式

我们需要转义一些东西，比如引号、反斜杠 \\\\ = \，使用正确的函数和正确的修饰符:

$regex = '~
@font-face\s*    # Match @font-face and some spaces
(                # Start group 1
   \{            # Match {
   (?:           # A non-capturing group
      [^{}]+     # Match anything except {} one or more times
      |          # Or
      (?1)       # Recurse/rerun the expression of group 1
   )*            # Repeat 0 or more times
   \}            # Match }
)                # End group 1
(*SKIP)(*FAIL)   # Skip it
|                # Or
url\s*\(         # Match url, optionally some whitespaces and then (
\s*              # Match optionally some whitespaces
("|\'|)          # It seems that the quotes are optional according to http://www.w3.org/TR/CSS2/syndata.html#uri
\K               # Reset the match
(?!["\']?(?:https?://|ftp://))  # Put your negative-rules here (do not match url's with http, https or ftp)
(?:[^\\\\]|\\\\.)*?  # Match anything except a backslash or backslash and a character zero or more times ungreedy
(?=              # Lookahead
   \2            # Match what was matched in group 2
   \s*           # Match optionally some whitespaces
   \)            # Match )
)
~xs';

$input = file_get_contents($css_file);
preg_match_all($regex, $input, $m);
echo '<pre>'. print_r($m[0], true) . '</pre>';

demo

第 2 部分:匹配 @font-face 中的 url {}

2.1 不同的方法

我想在 2 个正则表达式中完成这部分，因为匹配 @font-face {} 中的 URL 会很痛苦，同时还要处理大括号 {} 的状态 在递归正则表达式中。

因为我们已经有了我们需要的部分，我们只需要在一些代码中应用它们:

1. 匹配所有 @font-face {} 实例
2. 遍历这些并匹配所有的 url()

2.2 代码化

$results = array(); // Just an empty array;
$fontface_regex = '~
@font-face\s*    # Match @font-face and some spaces
(                # Start group 1
   \{            # Match {
   (?:           # A non-capturing group
      [^{}]+     # Match anything except {} one or more times
      |          # Or
      (?1)       # Recurse/rerun the expression of group 1
   )*            # Repeat 0 or more times
   \}            # Match }
)                # End group 1
~xs';

$url_regex = '~
url\s*\(         # Match url, optionally some whitespaces and then (
\s*              # Match optionally some whitespaces
("|\'|)          # It seems that the quotes are optional according to http://www.w3.org/TR/CSS2/syndata.html#uri
\K               # Reset the match
(?!["\']?(?:https?://|ftp://))  # Put your negative-rules here (do not match url\'s with http, https or ftp)
(?:[^\\\\]|\\\\.)*?  # Match anything except a backslash or backslash and a character zero or more times ungreedy
(?=              # Lookahead
   \1            # Match what was matched in group 2
   \s*           # Match optionally some whitespaces
   \)            # Match )
)
~xs';

$input = file_get_contents($css_file);

preg_match_all($fontface_regex, $input, $fontfaces); // Get all font-face instances
if(isset($fontfaces[0])){ // If there is a match then
    foreach($fontfaces[0] as $fontface){ // Foreach instance
        preg_match_all($url_regex, $fontface, $r); // Let's match the url's
        if(isset($r[0])){ // If there is a hit
            $results[] = $r[0]; // Then add it to the results array
        }
    }
}
echo '<pre>'. print_r($results, true) . '</pre>'; // Show the results

demo

_{Join the regex chatroom !}

关于php - 通过在@font-face 中搜索替换从@font-face 中提取网址，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21392684/