Explain RegExp in ES6?

Javascript Web Development Front End Technology

The ES6 is the latest JavaScript version which was introduced in 2015. We will learn about all the features of RegExp means regular expression, which Es6 contains.

What is the Regular Expression and Usage of it

The regular expression is a string representing the particular search pattern containing the different characters, such as numeric, alphabetic, and special characters.

Let’s understand the real−time usage of regular expression.

We hope you all have filled out any form in the past and seen particular form field validation errors. For example, if you don’t enter the email with the ‘@’ character or enter a mobile number of 10 digits, it gives an error. So, we can do form−field input validations using the regular expression.

Also, we can use the regular expression to find a particular substring in the string and replace it with the new string.

The regular expression can be used for password validation to ensure whether the password is strong.

There can be many uses of the regular expression like the above.

Syntax

We can define the regular expressions using two different ways given below.

Literal notation − Users need to define the search pattern between two forward slashes to represent the search pattern as a regular expression.

myImage.style.display = "block";

Constructor − We can use the RegExp() constructor function with a new keyword to define the regular expression object. Users can follow the syntax below to define the regular expression using the constructor function.

var pattern = new RegExp(search_pattern, attributes);

Attributes

We can use the combinations of the multiple attributes given below.

Attribute	Description
G	It is used for the global match in the string.
I	It ignores the case in the string.
M	It is used to match between multiline.
U	U stands for Unicode, which allows to treat the RegExp as a sequence of Unicode code points.
Y	It is used to start matching from the last index.

Constructing Regular Expressions

We can use the different special characters to build a regular expression which we will understand below with examples.

Brackets

We can use the brackets to define the range of characters in the regular expression pattern.

Bracket Notation	Description
[abc…]	It searches for any single character from the bracket in the searching string.
[^abc…]	It searches for any single character which is not in the bracket.
[D−L]	It searches for any single uppercase character between the D and L.
[d−l]	It searches for any single lowercase character between the D and L.
[0−9]	It searches for any single digit between 0 and 9.

Example 1

In this example, we have created a pattern using modifier 'g' and bracket notation and matched the pattern with the message string. You can observe that it only returns ‘Script’ from JavaScript as we haven't ignored the case using the ‘I’ modifier.

<html>
<body>
   <h2> Using the bracket notations in the regular expression </h2>
   <p id="output"> </p>
</body>
   <script>
      let output = document.getElementById("output");
      let message ="TutorialsPoint is a great website to learn JavaScript and Typescript.";
      // defining the regular expression pattern
      var pattern = new RegExp("Script", "g");
      // matching the pattern in string
      var script_match1 = message.match(pattern);
      output.innerHTML +=
      "All matches without case ignorance: " + script_match1 + "<br/>";
   </script>
</html>

Example 2

In this example, we find all matches with case ignorance. You can observe that we have ignored the case using the ‘I’ modifier.

<html>
<body>
   <h2> Using the bracket notations in the regular expression </h2>
   <p id="output"> </p>
   </body>
   <script>
      let output = document.getElementById("output");
      let message ="TutorialsPoint is a great website to learn JavaScript and Typescript.";
      // Matching with case ignorance
      pattern = new RegExp("Script", "gi");
      script_match1 = message.match(pattern);
      output.innerHTML +=
      "All matches with case ignorance:" + script_match1 + "<br/>";
   </script>
</html>

Example 3

In this example, we match characters between 'a' and 'c'.

<html>
<body>
   <h2> Using the bracket notations in the regular expression </h2>
   <p id="output"> </p>
   </body>
   <script>
      let output = document.getElementById("output");
      let message ="TutorialsPoint is a great website to learn JavaScript and Typescript.";
      // matching from a particular range
      pattern = new RegExp("[a-c]", "g");
      script_match1 = message.match(pattern);
      output.innerHTML +=
      "All matches between a to c: " + script_match1 + "<br/>";
   </script>
</html>

Quantifiers

We can use the quantifiers to match the particular numbers of characters in the given string. We can use the different special characters to create different types of quantifiers.

Quantifier	Description
C+	It searches for a string containing one or more C.
C*	It searches for a string containing zero or more C.
C{M}	It searches for a string containing exactly M number of C.
C{M, N}	It searches for a string containing a total number of C’s between M and N.
C{M, }	It searches for a string containing at least M number of C.}
C$	It searches for a string ending with C.
^C	It searches for a string starting with C.

Example

In this example, we have used different quantifiers while creating the regular expression, matching the message string with the regular expression pattern.

<html>
<body>
   <h2> Using the <i> Quantifiers </i> in the regular expression </h2>
   <p id="output"> </p>
</body>
   <script>
      let output = document.getElementById("output");
      let message =
      "TutorialsPoint is a great website to learn JavaScript and Typescript.";
      // defining the regular expression pattern
      var pattern = new RegExp("a+", "g");

      // matching the pattern in string
      var script_match1 = message.match(pattern);
      output.innerHTML +=
      "All matches which contain at least one a: " +
      script_match1 +
      "<br/>";

      // Matching with case ignorance
      pattern = new RegExp("^t", "gi");
      script_match1 = message.match(pattern);
      output.innerHTML +=
      "All matches which starts with t: " + script_match1 + "<br/>";
   </script>
</html>

Literal characters

Literal characters We can use the literal characters to denote the escape characters in the regular expression.

Literal	Description
\0	It denotes the NULL character.
\t	It denotes the tab
	It denotes the new line.
\v	It denotes the verticle tab.
\r	It is used to specify the Unicode character u by the Hexa decimal number xxxx.

Example

In this example, we have used the ‘\t’ literal to escape the tab and replace all ‘T’ characters with the ‘p’ in the message string.

<html>
<body>
   <h2> Using the <i> Literal characters </i> in the regular expression </h2>
   <p id="output"></p>
   </body>
   <script>
      let output = document.getElementById("output");
      let message =
      "TutorialsPoint is a great website to learn JavaScript and Typescript.";
      // defining the regular expression pattern
      var pattern = new RegExp("\T", "g");

      // matching the pattern in string
      var script_match1 = message.replace(pattern, "\p");
      output.innerHTML +=
      "After replacing the T in the string with p is : <br>" +
      script_match1 +
      "<br/>";
   </script>
</html>

Meta characters

Meta character	Description
\s	It specifies the blank space.
\S	It specifies the non-blank space.
\w	It specifies the word character.
\W	It specifies the non-word character.
\d	It specifies the decimal digit.
\D	It specifies the non-decimal digit.

This tutorial taught us to create regular expressions with different notations via examples. Users can try to create regular expressions of the different patterns and observe the output to be good with regular expressions.