Javascript regex unexpected output

Question

I'm trying to use node to do some regex on a css file.

Here's my javascript:

var fs = require ('fs');

fs.readFile('test.css','utf8',function(error,css){
if(error){
    console.log("I'm sorry, something went terribly wrong :o Here's the message: "+error);
}



var matches = css.match(/([a-zA-Z-]+):\s*([0-9]+)(vh|VH|vw|VW)/g);

    console.log(matches[2][1]);



});

Expected output when I run it:

regex101 output

Actual output:

As you can see it does not put every match in its own array as expected, it just puts everything in one giant array without any sub-arrays. Anything I can do?

Match is working as intended. It ignores the capture groups if you are not specifically processing them. You either have to use a different method, or save the match capture groups in some loops. — Andris Leduskrasts
– Andris Leduskrasts, Commented Jul 6, 2015 at 8:58

Matt Zeunert · Accepted Answer · 2015-07-06 08:56:41Z

1

match doesn't give you the detailed match results in this case:

If the regular expression includes the g flag, the method returns an Array containing all matched substrings rather than match objects.

You can use exec instead:

var regex = /([a-zA-Z-]+):\s*([0-9]+)(vh|VH|vw|VW)/g;
var css = "body{\nfont-size: 10vw;\n height: 500vh\n}";
var match;

while (match = r.exec(css)){
    console.log(match)
}

Which gives this output:

["font-size: 10vw", "font-size", "10", "vw", index: 6, input: "body{↵font-size: 10vw;↵ height: 500vh↵}"]  
["height: 500vh", "height", "500", "vh", index: 24, input: "body{↵font-size: 10vw;↵ height: 500vh↵}"]

answered Jul 6, 2015 at 8:56

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stdob-- · Accepted Answer · 2015-07-06 09:08:23Z

1

var reg = /([a-zA-Z-]+):\s*([0-9]+)(vh|VH|vw|VW)/g;
var matches = [];
var m;

while ((m = reg.exec(css)) !== null) {
    if (m.index === reg.lastIndex) {
        reg.lastIndex++;
    }
    matches.push(m);
}

console.log(matches);

edited Jul 6, 2015 at 9:08

answered Jul 6, 2015 at 9:00

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Comments

Viktor Kireev · Accepted Answer · 2015-07-06 09:12:14Z

1

It's actually expected behaviour. If you use string.match method with global flag, parenthesis do not create groups inside matches:

var str = "javascript is cool";
var result = str.match( /JAVA(SCRIPT)/g );
console.log( result[0] ); // javascript
console.log( result.length ); //1

Your case is using regexp.exec(str). It can find all matches and parenthesis groups in it.

var str = 'javascript is cool. Use javascript';

var regexp = /java(script)/g;

while (result = regexp.exec(str)) {   
  console.log(result.length);   //2
  console.log(result[0]);  //javascript
  console.log(result[1]);  //script 
}

edited Jul 6, 2015 at 9:12

answered Jul 6, 2015 at 9:09

Viktor Kireev

1,2501 gold badge10 silver badges18 bronze badges

Comments

JordyvD · Accepted Answer · 2015-07-06 09:04:59Z

0

Based on above answers I managed to come up with the following code:

while(match = css.match(/([a-zA-Z-]+):\s*([0-9]+)(vh|VH|vw|VW)/)){
        matches.push(match);
        css = css.replace(match[0],'');
}

Thanks a ton for the help everyone!

answered Jul 6, 2015 at 9:04

JordyvD

1,6251 gold badge21 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript regex unexpected output

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related