我有一堆包含我要查找/替换的图片网址的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。
答案 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)