javascript - 在 javascript 中执行没有 while 循环条件的组提取？

Question

场景

从多个 CSS url() 函数符号中提取 URL。鉴于项目 bootstrap 中的以下 css 值:

src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

我需要一组 URL 字符串，例如 ["../fonts/glyphicons-halflings-regular.eot?#iefix", "../fonts/glyphicons-halflings-regular.woff2", .. .].

解决方案

现在我使用 while 循环和正则表达式匹配器通过 CSS 解析器从已解析的声明中提取 URL 字符串:

var decValue = "url(foo), url(bar)";
// no data URI
var regexp = new RegExp(/url\(([^\(|^\)|^\"|^\']+)\)/g),
    matches = [],
    match;

while (match = regexp.exec(decValue), match !== null) {
    if (match[1].indexOf("data:") === -1) {
        matches.push(match[1]);
    }
}

// should print ["foo", "bar"]
console.log(matches);

问题

有没有办法在不使用 while 循环但保持组匹配的情况下做到这一点？

Answer 1

为避免 while 循环，您可以将分组逻辑移出到 map 函数中，并使用 String.prototype.match 全局获取所有匹配项:

var decValue = "url(foo), url(bar)";

// no data URI
var urlExp = /url\([^)]+\)/g,
    uriExp = /\(["']?([^)]+)["']?\)/;

var matches = decValue.match(urlExp).map(function (url) {
    return uriExp.exec(url)[1];
});    

// should print ["foo", "bar"]
console.log(matches);

不幸的是，它要求您分解正则表达式，但这或多或少只是通过迭代器模式进行的组提取。