JavaScript 的非贪婪正则表达式

Question

我想匹配CSS中的所有外部资源。例如，content包含 2 个资源，如 //cdn.com/roboto-regular.eot 和 //cdn.com/roboto-bold.eot 。

var reg = ///.*.(js|css|jpg|eot)[^//]/ig; 
var content="url(//cdn.com/roboto-regular.eot);src:url(//cdn.com/roboto-bold.eot#iefix)"; 
while ((match = reg.exec(content)) != null) console.log('match', match);

但该表达式会导致"//cdn.com/roboto-regular.eot);src:url(//cdn.com/roboto-bold.eot#"

如何使表达式不贪婪，以便获得每个匹配项？

Answer 1

您可以从匹配字符 列表中排除某些字符：

var reg = ///[^)(]*.(js|css|jpg|eot)/ig;
var content="url(//cdn.com/roboto-regular.eot);src:url(//cdn.com/roboto-bold.eot#iefix)"; 
while ((match = reg.exec(content)) != null) console.log('match', match);

[^)(]意味着everything except ")" and "("。

Answer 2

使正则表达式中的.*数量变得懒惰（或不贪婪）。

我认为这里唯一的问题是，从第一场比赛开始到最后一场比赛结束，.*消耗了所有东西。

var reg = ///.*?.(?:js|css|jpg|eot)[^//]/ig; 
var content="The quick brown fox jumps over the lazy dog. n url(//cdn.com/roboto-regular.eot); some more stuff here src:url(//cdn.com/roboto-bold.eot#iefix)"; 
while ((match = reg.exec(content)) != null) console.log('match', match);

输出：

match //cdn.com/roboto-regular.eot),eot
match //cdn.com/roboto-bold.eot#,eot

演示