How do you access the matched groups in a JavaScript regular expression?

Front End Technology Javascript Web Development

This tutorial will teach us to access the matched groups in JavaScript regular expression. The regular expression is the sequence of the character, also called the RegEx, and it is useful to match specific patterns in the string.

There can be more than one match for the specific pattern in the string. To get the occurrence of all matches, we have explained the different methods below in this tutorial.

We will also see the various usage of the regular expression in this article.

Use the ‘g’ flag while creating the Regex

When we add ‘g’ as the modifier in the regular expression, it searches for all occurrences of the Regex pattern in the given string and returns the iterable object. We can iterate through the object and convert it into the array to access all matched groups.

Syntax

Users can use the below syntax to use the ‘g’ modifier in the regular expression.

let str = "digit 01, 39 digits";
let regexp = /[0-9]/g;
let group = str.match(regexp);
for (const element of group) {
   index.innerHTML += element + '<br/>';
}

In the above syntax, a group is an iterable object, but it is not the array. So, we can’t access any elements from the object directly. Either we can convert to the array or iterate through the object and access every element. Here, we have used the for loop to iterate through the object and access all elements.

Example

In this example, we have created the basic regular expression to find all the occurrences of the digits between 0 and 9. We have used ‘g’ as a modifier to find all elements, and it returns all the elements between 0 to 9 from the string. If any digit occurs multiple times, it returns multiple times.

We have used the match() method to match the all occurrences of the pattern, but users can also use the matchAll() method.

<html>
<head>
   <title> Example - Access all the matched groups in Regular expression.
</title>
</head>
<body>
   <h4> All matching digits between 0 to 9 using 'g' flag </h4>
   <div id="index"> </div>
   <script>
      let index = document.getElementById("index");
      const str = "digit 01, 39 digits";
      const regexp = /[0-9]/g;
      const group = str.match(regexp);
      for (const element of group) {
         index.innerHTML += element + '<br/>';
      }
   </script>
</body>
</html>

In the above output, users can see that it returns all the elements between 0 to 9 from the given string.

Access the named groups

In this section, we will create a group inside the regular expression and gives it a unique name. It will be easy to check whether the pattern of a particular group is in the string or not. Also, we can get all the patterns of the particular group.

Syntax

Users can follow the syntax below to create the group in the regular expressions.

?<group_name> // to add group in the regular expression.
/(?<group1>[0-2]{2})/gi

In the above syntax, users can see that we have created the group1 named group which contains the digits between 0 to 2 and a length of 2.

Example

The below example demonstrates the creation of the group inside the regular expression. We can access the groups of the matched occurrence using the iterable object.

<html>
<head>
   <title>Example - Access all the matched groups in Regular expression.
</title>
</head>
<body>
   <h4> Accessing named groups in Regular expression. </h4>
   <div id="index"> </div>
   <script>
      let index = document.getElementById("index");
      const str = "a-1 b-12 c-32 d-40";

      // regular expression to find all occurence of element with length 2 digits.
      let regexp = /(?<name>[a-z])-(?<total>[0-9]{2})/gi;
      const group = str.matchAll(regexp);

      // getting all values from the groups
      for (const element of group) {
         let {
            name,
            total
         } = element.groups;
         index.innerHTML += "name is " + name + ". total number of " + name + " is " + total + '. <br/>';
      }
   </script>
</body>
</html>

Conclusion

In this tutorial, we have learned to access all matches occurring of the regular expression. In the first part, we have to use the match() method to find the match and also use the ‘g’ flag to get all groups.

In the second part, we have created the groups inside the regular expression. After that, we match the groups. For every match, we can get the value of the group, as demonstrated in the example.