JS RegExp capturing parentheses

Question

I am a newbie to JS RegExp. I got confused by the following RegExp matches.

var x = "red apple"

var y = x.match(/red|green/i)

Now y is ["red"].

However if I add a pair of parentheses around red and green and make y to be

var y = x.match(/(red|green)/i)

Now, y would become ["red", "red"]. I have searched online https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp and found that it's something called capturing parentheses.

It says For example, /(foo)/ matches and remembers 'foo' in "foo bar." The matched substring can be recalled from the resulting array's elements [1], ..., [n] or from the predefined RegExp object's properties $1, ..., $9.

But I don't understand what does it mean by recalled from the resulting array's element or from predefined RegExp object's properties? Can anyone please explain ? Thank you!

Try to use the global search

aviel
– aviel

2014-11-22 17:05:09 +00:00
Commented Nov 22, 2014 at 17:05 — aviel
– aviel, Commented Nov 22, 2014 at 17:05

hwnd · Accepted Answer · 2014-11-22 17:17:28Z

3

It means that the match result (obtained from the capturing group) can be accessed by referring to that specific group number [1] .. [n] where n represents the number of the capturing group you want to access.

Note: [0] applies to the overall match result.

var r = 'red apple'.match(/(red|green) apple/i);
if (r)
    console.log(r[0]); //=> "red apple"        # entire overall match
    console.log(r[1]); //=> "red"              # match result from 1st capture group

edited Nov 22, 2014 at 17:17

answered Nov 22, 2014 at 17:05

hwnd

70.9k4 gold badges100 silver badges135 bronze badges

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

Comments

Tomalak · Accepted Answer · 2014-11-22 17:13:31Z

1

When the match result is stored to (in this case) y, y[0] is always the overall match, while y[1] .. y[9] contain the individual capturing groups.

In /(red|green) apple/, applied to "This is a red apple.", y will be ["red apple", "red"].

answered Nov 22, 2014 at 17:13

Tomalak

339k68 gold badges547 silver badges635 bronze badges

1 Comment

SSDong Over a year ago

Thanks for your brief but awesome solu!

aviel · Accepted Answer · 2014-11-22 17:06:49Z

0

Use this

var y = x.match(/(red|green)/gi);

Answer is

y = ["red"]

answered Nov 22, 2014 at 17:06

aviel

1889 bronze badges

1 Comment

nu11p01n73R Over a year ago

The question is not about how to match but asking for explanation on capturing group

Collectives™ on Stack Overflow

JS RegExp capturing parentheses

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related