在没有while循环条件的情况下执行组提取？

Question

Scenario

Extracting URLs from multiple CSS url() functional notation. Given the following css value from project bootstrap :

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');

I need an array of URL strings like ["../fonts/glyphicons-halflings-regular.eot?#iefix", "../fonts/glyphicons-halflings-regular.woff2", ...] .

Solution

Right now I use a while loop and regex matcher to extract URL strings from the parsed declaration via a CSS parser:

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);

Question

Is there a way to do this without using a while loop but keeping group matching?

Answer 1

To avoid a while loop you could move the grouping logic out in to a map function and use String.prototype.match to grab all matches globally:

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);

Unfortunately requires you to break up your regex, but it's more or less just group extraction via an iterator pattern.

Answer 2

Because javascript doesn't support lookbehinds, you have to get creative when the text behind a position matters but you don't want to capture it. This regex accounts for single and double quotation marks.

Here's one method that uses replace to push to an array, it doesn't modify the original variable.

 var 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');" var garnerURLs = []; css.replace(/url\\(('[^']*'|"[^"]*"|[^\\)]*)\\)/g,function(match,p1) { if (p1.charAt(0) == "'" || p1.charAt(0) == "\\"") { garnerURLs.push(p1.substr(1,p1.length-2)) } else { garnerURLs.push(p1) } }); console.log(garnerURLs) console.log(css) 

url\(('[^']*'|"[^"]*"|[^\)]*)\)

Explanation:

 url                # Literal url
 \(                 # Literal (
 (                  # Opens CG1
     '              # Literal '
     [^']*          # Negated Character class (excludes the characters within)
     '              # Literal '
 |                  # Alternation (CG1)
     "              # Literal "
     [^"]*          # Negated Character class (excludes the characters within)
     "              # Literal "
 |                  # Alternation (CG1)
     [^\)]*         # Negated Character class (excludes the characters within)
 )                  # Closes CG1
 \)                 # Literal )

Any of the answers here, along with your current method, essentially involve a loop. Even if javascript supported lookbehinds, a simple match() method still loops over the list while it finds further matches. In the end, any of these solutions is a fine solution.