DEV Community

Lukas Gaucas
Lukas Gaucas

Posted on • Updated on

Capturing group misconception in Regex

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... )
image.png

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Congrats , you just learn very basics of groups, capturing & backreferencing !


If any typos found and (or) suggestions could be made, please leave it in the comment section below . Thank you and see you in the next one !

Top comments (0)