CSS图像网址的正则表达式

时间:2014-01-30 14:48:32

标签: css regex notepad++

我有一堆包含我要查找/替换的图片网址的CSS。 CSS通常每行有多个网址,网址可能差异很大:

.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(../images/<filename>.<ext>)

我最接近的是

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

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

我可以不看(前方)吗?我不知道正则表达式引擎是否支持它们。

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

2 个答案:

答案 0 :(得分:3)

怎么样:

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

答案 1 :(得分:1)

我在问题上使用了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)