Groups And Range Of Characters

In regular expression, sometimes we need to match a group of characters or a range of characters. These kind of expressions are written within a bracket notation. In this post, we will explore these kind of expressions with examples.

List of Range Expressions

The following table demonstrate the grouped expressions and their meaning.

a|b

In this expression, the expression matches all instances of “a” and “b” and return the values.

Example #1

<h2 id="out"></h2>
<script>
     var aString = "The bag is green and the book is yellow. I wanted both to be green.";
     var value = aString.match(/green|yellow/g);
     document.getElementById("out").innerHTML = value
</script>

Output #2

[abcd]

In this type of expression, any character from the range [abcd] is matched and if there is match character is returned successfully.Consider the following example.

Example #2

<h2 id="out"></h2>
<script>
var aString = "Brisbane and Thailand";
var value = aString.match(/[abcd]/g);
document.getElementById("out").innerHTML = value;
</script>

The characters of the string is matched with each character of the pattern and the search is global; therefore, whole of the string is searched for all instances of characters given in the pattern.

Output #2

In the output, the characters – “b”,”a” match from “Brisbane”, “a”,”d” matches from “and”, the characters “a”,”a”,”d” matches from “Thailand”.

[a-e]

The expression [a-e] is similar to [abcd] and all character between a-e are matched and returned.

Example #3

<h2 id="out"></h2>
<script>
var aString = "Great Britain And Scotland";
var value = aString.match(/[a-e]/g);
document.getElementById("out").innerHTML = value;
</script>

Output #3

[^abcd]

This expression will match everything except the characters given in the bracket.

Example #4

<h2 id="out"></h2>
<script>
var aString = "Chocolate";
var value = aString.match(/[^abcd]/g);
document.getElementById("out").innerHTML = value;
</script>

The code will search the characters of the string and match all that is NOT in the expression.

Output #4

[^a-e]

The expression means match all characters of the string except the one given in the expression.

Example #5

<h2 id="out"></h2>
<script>
var aString = "Spiderman";
var value = aString.match(/[^a-d]/g);
document.getElementById("out").innerHTML = value;
</script>

The script above, match all the characters except that are in the expression. The only character which is skipped is “d”,”a” in the word – “Spiderman”. See the output below that prints all the character other than “d” and “a”.

Output #5

Capturing Groups

So far we have seen matching individual characters from the string. However, sometimes we need to capture a group of characters from the given string. Consider the following example.

Example #6

var myStr = "Today is a very good day daddy";
var value = myStr.match(/da+/ig);
alert(value);

All characters that has ‘d’ followed by one or more ‘a’ will be captured, but we want to capture all instance of ‘da’ group.

Output #6

The output shows that the expression works correctly and capture the group “da” as long as there are no consecutive ‘a’s. Therefore, we change the script and use group within parenthesis ( and ) to get the desired instances of sub-string. We rewrite the same script again. See the example below.

Example #7

var myStr = "Today is a very good day daddy";
var value = myStr.match(/(da)+/ig);
alert(value);

The regular expression can be translated to ” find all instances of the group “da” in the string ignoring cases”.

Output #7

The output shows all the instances of “da” that get stored in the variable “value”. The variable “value” is not an array of these values. We can use the index to call any particular value just as you fetch a value from JavaScript array.

Example #8

alert(value[1]);

Output #8

Named Groups

Since it is difficult to track the index numbers generated by the capturing group. We can use named capturing groups. It simply means capture all groups into a .group object of match(). We can easily understand this with an example.

 let str = "Enter Firstname: John, Enter Lastname: Rambo";
 let name = str.match(/Enter Firstname: (?<first>\w+), Enter Lastname: (?<last>\w+)/);
 console.log(name.groups);

The script above will capture the first name and last name and each of the group has label associated. If we check the .groups property of name variable. Note that the groups property is an object with key-value pairs. The value of the .group property are:

{ first: "John", last: "Rambo" }

Here is the code for the example program;

Example #9

<!DOCTYPE html>
<html>
<head>
     <title> Named Capturing Group</title>
     <meta charset="utf-8"/>
</head>
<body>
<h4><u>Named Group</u></h4><br>
<h3 id="comp"></h3>
<script>
      let str = "Enter Firstname: John, Enter Lastname: Rambo";
      let name = str.match(/Enter Firstname: (?<first>\w+), Enter Lastname: (?<last>\w+)/);
      document.getElementById("comp").innerHTML  = "Hi , My name is" + " " + name.groups.first + " " + name.groups.last;
</script>
</body>
</html>                          

Output #9

There are also non capturing group. We will discuss more about capturing groups in future articles.