preg_replace() 正则表达式匹配 CSS 文件中的相对 url() 路径 [英] preg_replace() regex to match relative url() paths in CSS files

问题描述

我正在合并一些 CSS 文件并将它们写入一个单独目录中的文件.我正在尝试替换相对 url() 值以使用新文件位置，忽略任何绝对 URL.这是一些示例 CSS:

I'm combining some CSS files and writing them to a file in a separate directory. I'm trying to replace the relative url() values to work with the new file location, ignoring any absolute URLs. Here's some sample CSS:

#TEST {
    background:url(test.jpg);
    background:url( 'test.jpg' );
    background:url("test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url("http://example.com/test.jpg");
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

任何不以 http://、https:// 或 // 开头的都应该得到 $path 在它之前注入(只有前 3 个应该匹配).

Anything that doesn't start with http://, https:// or // should get $path injected before it (only the first 3 should match).

期望的输出:

#TEST {
    background:url(/themes/default/css/test.jpg);
    background:url( '/themes/default/css/test.jpg' );
    background:url("/themes/default/css/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url("http://example.com/test.jpg");
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

但是，此代码正好相反:

$path = '/themes/default/css/';
$search = '#url\(\s*([\'"]?)((http(s)?:)?//)#';
$replace = "url($1{$path}$2";
$css = preg_replace($search, $replace, $css);

我知道你可以使用诸如 !^(http) 之类的东西来不匹配以 http 开头的字符串，但我所知道的一切尝试失败(我 === 不擅长正则表达式).我一直在使用 online regex tester 来解决这个问题，但我真的卡住了.

I know you can use something like !^(http) to not match strings that start with http, but everything I've tried has failed (me === bad at regex). I've been using an online regex tester to figure this out but am truly stuck.

这可能不是我用来解决真正问题的方法(确保路径在编译后的 CSS 中有效)，但谁能帮我解决这个正则表达式问题，或者有更好的解决方案?

This might not be what I use to solve the real problem (making sure paths work in compiled CSS) but can anyone help me fix this regex problem, or have a better solution?

推荐答案

您就快到了 - 您要解决不匹配的字符串以"开头的问题吗?被称为负前瞻"看起来像 (?!http).

You're almost there - what you're after for the "not matching strings starting with" is called a "negative lookahead" and looks like (?!http).

所以对于 url\( 后面没有 \s*['"]?(https?:)?//，你这样做:

So for url\( not followed by \s*['"]?(https?:)?//, you do:

url\((?!\s*['"]?(http(s)?:)?//)

(我保留了 (s) 捕获组，以防您想捕获它，但是您不需要 (s) 周围的括号；s? 和 (s)? 一样，如果你不关心捕获的话.

(I kept that (s) capturing group in there incase you wanted to capture it, but you don't need those brackets around the (s); s? is the same as (s)? if you don't care about capturing).

在此处查看实际效果.

由于您想将 $path 放在引号(如果有)之后，我将正则表达式修改为:

Since you want to put the $path after the quote mark (if any), I modified the regex to:

url\((?!\s*['"]?(?:https?:)?//)\s*(['"])?

即删除了我不关心的所有捕获括号，并添加了一个 \s*(['"])? 来捕获它是什么类型的引用.

i.e. removed all capturing brackets I don't care about, and added a \s*(['"])? to capture what kind of quote it is.

我认为它在键盘这里中，但以防万一，这里是代码:

I think it is in codepad here, but just in case, here is the code:

$path = '/themes/default/css/';
$search = '#url\((?!\s*[\'"]?(?:https?:)?//)\s*([\'"])?#';
$replace = "url($1{$path}";

这篇关于preg_replace() 正则表达式匹配 CSS 文件中的相对 url() 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！