Posted on Nov 1, 2021 • Edited on Dec 11, 2021

Capturing group misconception in Regex

Groups can be two types :

capturing (used for backreference, some particularly significant meaning internally) |-- capturing groups might be labelled with names , but not mandatory ;
non-capturing (used for idiomatic organization , none of particularly significant meaning internally) : seems like many years capturing groups were used for organizing without intention to exploit backreferencing feature included : this means it was exploited as wrong tooling leaving backrefs behind the scene unused (unless someone clever enough but have not shared this idea with us, well till now... )

Let's examine RegExp constructor a bit :

new RegExp() // output : /(?:)/ as if ...  new RegExp("(?:)") // ... implicitly done this way (default) // however if done that way:.. new RegExp("()") // this becomes capturing if explicitly defined

Examples taken from stefanjudis (for educational purpose only) :

Example 1 (capturing with backreference)

// capturing group has signature of () – a.k.a. parenthesis const re = /(\w+)\s(\w+)/; const str = 'Jane Smith'; const newstr = str.replace(re, '$2, $1'); console.log(newstr); // Smith, Jane

Please pay extra attention at possible signatures of backrefs

for literal regex we would use \1\2

for string regex we use "$1", "$2" etc.

Example 2 (non-capturing : let's say backreferencing is not intended to be used)

// non-capturing group has signature of (?:) const re = /(?:\w+)\s(\w+)/; const str = 'Jane Smith'; let newstr = str.replace(re, '$2, $1'); console.log(newstr); // $2, Jane // to prevent dollar sign of $2 outputting just do the following : newstr = str.replace(re, '$1'); console.log(newstr); // Jane

TL;DR : if backref required e.g. for string replacement , follow capturing on Example 1 , otherwise use implicitly default non-capturing as shown in Example 2