CSS图像网址的正则表达式答案

【问题标题】：Regexp for CSS image urlsCSS图像网址的正则表达式
【发布时间】：2014-01-30 14:48:32
【问题描述】：

我有一堆包含我想要查找/替换的图片网址的 CSS。 CSS 通常每行有多个 url，并且 url 可以有很大的不同：

.class{display:inline;} .stuff{background:green url(/dir/subdir/dir.with.dots/image.png)} a{color:blue;} .more-stuff{background:url("../updir/newdir/file_image-new.jpg") no-repeat;}

我想让每个 url 都变成 url(../images/<filename>.<ext>) 而没有路径的其余部分。

离我最近的是

/url\s*\("?(?:.+\/)*(.*?)\.(png|gif|jpe?g)"?\)/url(../images/$1.$2)/g

但(?:.+\/)* 将选择图片网址之间的 CSS。如果我在该部分的末尾添加?，我最终只会替换第一个目录级别。

我可以在不看（向前|向后）的情况下做到这一点吗？我不知道正则表达式引擎是否支持它们。

我看到的其他示例似乎具有可预测的行终止的便利性，每行只有一个 url。

【问题讨论】：

Parsing CSS 与正则表达式是pain。无论如何，您使用的是什么语言/工具？
我一直在使用 Notepad++ 和 reFiddle（用于突出显示）进行测试，但最终会使用 sed 或 python。
我将尝试在 Python 中执行此操作，但我还有一个问题：扩展是否需要动态匹配，或者您会使用 (?:png|jpe?g|gif|custom\.extension) 来定义它们吗？
@HamZa：我查看了 SO 链接。哎呀！我在 C# 中使用委托完成了类似的事情（在 C# 中找到 url([^)]+) 很容易，找到 url(<magic>) 很困难），但这不是这里的选项。我可以定义扩展。无需找到它们。
我有事要做，我可能会稍后回来，但同时享受this regex

标签： css regex notepad++

【解决方案1】：

怎么样：

查找内容：url\s*$"?/?(?:[^/]+/)*?([^/]+\.(?:png|gif|jpe?g))"?$
替换为：url(../images/$1)

【讨论】：

【解决方案2】：

我用Toto's excellent answer 回答我的问题一年了。

但是，用例已经有所扩展，包括其他图像（.svg）、字体（.eot、.woff）和人们的 CSS 技巧（.eot#?iefix）。过了一段时间，我厌倦了在正则表达式中添加额外的文件类型。

下面的正则表达式（大量借用 Toto）应该处理任何文件扩展名，即使末尾有垃圾：

url\s*\("?\/?(?:[^\/]+\/)*?([^\/]+?\.[^\"\'\)\/]+)"?\)
url(../images/$1)

奖金

# If you want to exclude Base64 encoded data, put in a negative lookahead
url\s*\("?(?!data:)\/?(?:[^\/]+\/)*?([^\/]+?\.[^\"\'\)\/]+)"?\)
url(../images/$1)

# If your engine supports backreferences, you can match quotes
url\s*\(\*(['"]?)\/?(?:[^\/]+\/)*?([^\/]+?\.[^\/]+)\1\s*\)
url(../images/$2)

【讨论】：