正则表达式捕获CSS URL时如何去除多余的末尾引号？

我懂你遇到的困扰了——你的正则在处理带单引号的url('images/prof_01.png')时，捕获结果会带上末尾的单引号，这其实是正则的贪婪匹配特性在搞鬼。

问题根源分析 #

你用的原正则：/url\(("|')?(.*)("|')?\)/
其中的(.*)是贪婪匹配模式，它会尽可能多地抓取字符。当遇到结尾的'时，因为后面的(')?是可选规则，贪婪匹配会直接把这个'包含进(.*)的结果里，最终就出现了images/prof_01.png'这种带引号的错误捕获。

两种靠谱的修正方案 #

方案1：改用非贪婪匹配

把(.*)改成(.*?)，让它尽可能少地匹配字符，遇到第一个可选引号或右括号就停止。同时我还优化了引号匹配逻辑，用反向引用确保前后引号一致：

/url\((['"])?(.*?)\1?\)/

这里的(['"])统一匹配单/双引号，\1反向引用前面捕获到的引号类型，避免出现前后引号不一致的无效匹配，最后的?保留了引号可选的特性。

方案2：使用排除字符集（更高效）

直接定义“不能匹配的字符”，让正则只抓取引号和右括号之外的内容，从根源上避免捕获到引号：

/url\((['"])?([^'")]+)\1?\)/

[^'")]+表示匹配一个或多个不是单引号、双引号、右括号的字符，这种方式不需要正则回溯，性能比非贪婪匹配更优。

测试验证 #

用你的目标字符串测试：
#test{background:url(images/prof_01.png);} #test2{background:url('images/prof_01.png');}
两种正则都能精准捕获到images/prof_01.png，不管是不带引号、带单引号还是带双引号的场景都能正常工作。

内容的提问来源于stack exchange，提问作者lsmpascal