Groups & Capturing

Grouping is the most useful feature of regex. Grouping can be done by placing regular expression inside round brackets.

It unifies the regular expressions inside it as a single unit. Let's look at its usages one by one:

  1. It makes the regular expression more readable and sometimes it is an inevitable thing.

    Suppose, we want to match both the sentences in the above text, then grouping is the inevitable thing.

  2. To apply quantifiers to one or more expressions.

Similarly, you can use other quantifiers.

  1. To extract and replace substrings using groups. So, we call groups Capturing groups, becuase we are capturing data(substrings) using groups.

    In this part, we will see how to extract and replace data using groups in Javascript.

    Data Extraction

    Observe the code below.

    var str = "2020-01-20";
    
    		// Pattern string
    		var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
    
    		//                ^       ^       ^
    		//group-no:   1       2       3
    
    		var result = pattern.exec(str);
    
    		// printing
    		console.log(result);
    		/* Output will be:
    		[
    		  '2020-01-20', //-------pattern
    		  '2020', //-----First group
    		  '01', //-------Second group
    		  '20', //-------Third group
    		  index: 0,
    		  input: '2020-01-20',
    		  groups: undefined
    		]
    		*/
    		// Data extraction
    		console.log(result[1]); // First group
    		console.log(result[2]); // Second group
    		console.log(result[3]); // Third group
    		

    In the output array, the first data is a match string followed by the matched groups in the order.

    Data Replacement:

    Replace is another function, which can be used to replace and rearrange the data using regex. Observe the code below.

    var str = "2020-01-20";
    
    		// Pattern string
    		var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
    
    		//                ^       ^       ^
    		//group-no:   1       2       3
    
    		// Data replacement using $group_no
    		var ans=str.replace(pattern, '$3-$2-$1');
    
    		console.log(ans);
    		// Output will be: 20-01-2020
    		

    As you can see, we have used $group_no to indicate the capturing group.

Problems

Predict the output of the following regex:

  1. RegEx: ([abc]){2,}(one|two)
    Text: aone cqtwo abone actwo abcbtwoone abbcccone

    Answer:

  2. RegEx: ([\dab]+(r|c)){2}
    Text: 1r2c ar4ccc 12abr12abc acac, accaca, acaaca aaar1234234c, aaa1234234c 194brar, 134bcbb-c

    Answer: