javascript - non-capturing parenthesis in "a or b" regex (operator precedence) -

question: bug, or misunderstanding?

here's regexp accepts "a red balloon" or "a blue balloon", shown in node.js rep. i'm using 'non-capturing' ?: form since i'm not interested in capturing color:

/a (?:red)|(?:blue) balloon!/.exec("a red balloon!") => [ 'a red', index: 0, input: 'a red balloon!' ] 

so far, good. want match on red or blue 'ball' or 'balloon' or 'ballistic missile' or whatnot , capture that:

/a (?:red)|(?:blue) (ba.+)!/.exec("a red ball bearing!") => [ 'a red', undefined, index: 0, input: 'a red ball bearing!' ] 

it matched, failed capture second form ('ball bearing'). (for it's worth, same form in regex101.com not match.) make capture, had wrap entire "or" clause in non-capturing parentheses:

/a (?:(?:red)|(?:blue)) (ba.+)!/.exec("a red ball bearing!") => [ 'a red ball bearing!', 'ball bearing', index: 0, input: 'a red ball bearing!' ] 

so question: why doesn't second form work? (or why match in javascript , not in regex101.com?) why introducing non-capturing clause have bearing on subsequent capturing clause? or indicative of bug?

it's interpreting as:

a (?:red) or (?:blue) (ba.+)!

that's why captured "a red". once added parantheses, captured correctly. it's order of operations.

with parantheses, became:

a red or blue ba.+ !