JavaScript Regular Expression (RegEx) with example programs

This post is published to provide complete information about regular expressions in JavaScript.

What is a regular expression?

A regular expression is something like a sequence of characters. But it is not a normal sequence of characters; rather, it is a sequence that forms a search pattern.

Sometimes, we need to implement a simple or complex search in our application, where the search is based on some pattern. For example, let us suppose we are going to implement a form that asks some information about the user, like:

where we need to match the pattern of this data before feeding it into the database. For example, if we take the first piece of data, that is, email, then we need to match the user's email properly. For example, an email must start with a unique username like codescracker followed by @ and a company URL like gmail.com, hotmail.com, etc.

So these are some of the scenarios where regular expressions come into play, which allow us to implement the match pattern for any data we need to match. But before starting the match pattern, we need to understand its modifiers and patterns. So let's get started.

JavaScript Regular Expression Syntax

Whatever the pattern or regular expression you use for matching, the basic and general form you need to follow is:

/pattern/modifiers;

Here, pattern refers to the search pattern that is used to match. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>The first 'is' is available at Index no.<span id="xyz"></span></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let pos = myString.search(/is/);

      document.getElementById("xyz").innerHTML = pos;
   </script>
   
</body>
</html>
Output

The first 'is' is available at Index no.

Note: The search() method is used to search a substring (value) in a string using a regular expression.

And modifiers are used to change the default search method. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>The first 'is' available at Index no.<span id="xyz"></span></p>

   <script>
      let myString = "JavaScript Is Fun. Is not it?";
      let pos = myString.search(/is/i);

      document.getElementById("xyz").innerHTML = pos;
   </script>
   
</body>
</html>
Output

The first 'is' available at Index no.

The i after /is/ forces the search pattern to be case-insensitive.

JavaScript Regular Expression Flags or Modifiers

Flags or modifiers in regular expressions are used to modify the search method. Here is the list of flags that can be used in JavaScript regular expressions:

For example, let me create a JavaScript example without using any modifiers. Then we will use modifiers to see the change:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let matches = myString.match(/is/);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>
Output

Note: The match() method is used to match a string with or using a regular expression.

Now let me implement the g modifier to allow the match pattern globally. That is, to get all matches instead of stopping after the first match:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun, is not it?";
      let matches = myString.match(/is/g);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>
Output

Then let's use the i modifier to do case-insensitive matching:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let myString = "JavaScript is Fun. Is not it?";
      let matches = myString.match(/is/gi);

      document.getElementById("xyz").innerHTML = matches;
   </script>
   
</body>
</html>
Output

JavaScript Regular Expression Patterns

In JavaScript regular expressions, we can use brackets to apply the match pattern through the range of characters defined in the brackets. For example:

For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>List of all Matches for First Pattern: <b><span id="resA"></span></b></p>
   <p>List of all Matches for Second Pattern: <b><span id="resB"></span></b></p>
   <p>List of all Matches for Third Pattern: <b><span id="resC"></span></b></p>

   <script>
      let text = "WE have created codescracker.com to provide FREE online learning.";
      let a = text.match(/[re]/gi);
      let b = text.match(/[^re]/gi);
      let c = text.match(/[a-d]/gi);
      
      document.getElementById("resA").innerHTML = a;
      document.getElementById("resB").innerHTML = b;
      document.getElementById("resC").innerHTML = c;
   </script>
   
</body>
</html>
Output

List of all Matches for First Pattern:

List of all Matches for Second Pattern:

List of all Matches for Third Pattern:

Let me create another example that uses the [0-9] and [^0-9] patterns:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>List of all Matches for First Pattern: <b><span id="A"></span></b></p>
   <p>List of all Matches for Second Pattern: <b><span id="B"></span></b></p>
   <p>List of all Matches for Third Pattern: <b><span id="C"></span></b></p>

   <script>
      let text = "X23sx495682043-234932lo6023";
      let a = text.match(/[0-9]/g);
      let b = text.match(/[^0-9]/g);
      let c = text.match(/[3-6]/g);
      
      document.getElementById("A").innerHTML = a;
      document.getElementById("B").innerHTML = b;
      document.getElementById("C").innerHTML = c;
   </script>
   
</body>
</html>
Output

List of all Matches for First Pattern:

List of all Matches for Second Pattern:

List of all Matches for Third Pattern:

Here is another example regarding the (a|b) pattern:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = "What do you like? Cricket or Football?";
      let ptrn = /(cricket|football)/gi;
      document.getElementById("xyz").innerHTML = mystr.match(ptrn);
   </script>
   
</body>
</html>
Output

It is not limited to using only two characters or words. We can use multiple words or characters to match the listed characters or words. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = "London, Berlin, london, Austin, Dallas, Seattle";
      let ptrn = /(London|Austin|Dallas|Berlin)/gi;
      document.getElementById("xyz").innerHTML = mystr.match(ptrn);
   </script>
   
</body>
</html>
Output

List of Metacharacters Used in JavaScript Regular Expressions

Metacharacters are characters that start with a backslash (/) followed by character(s) that have special meaning in computer programming and play an important role in defining the match pattern while working with regular expressions in JavaScript.

Here is the list of metacharacters used in JavaScript regular expressions:

Quantifiers in JavaScript regular expressions are described in a separate post.

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!