Jobs Hub

JavaScript Regular Expression

This post is published to provide the complete information about regular expression 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.

Sometime, 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 these data before feeding into the database. For example, if we take the first data, that is, email, then we need to match the entered email by user properly. For example, an email must be started with a unique username like fresherearth followed by @ along with a company URL say gmail.com, hotmail.com etc.

So these are some of the scenario where regular expression comes into picture, that allows to implement the match pattern to 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, but 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 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/ force the search pattern to be go case-insensitive.

JavaScript Regular Expression Flags/Modifiers

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

For example, let me create a JavaScript example without using any modifiers. Then will use modifier(s) 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/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 i modifier to go 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 expression, we can use brackets to apply the match pattern through 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 jobails.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] pattern:

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 (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 use only two character or words. We can use multiple words or characters to match, from 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 Expression

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

Here are the list of metacharacters used in JavaScript regular expression:

The description and examples of above metacharacters are provided in its separate tutorial.

Quantifiers in JavaScript regular expression are described in its separate tutorial.

JavaScript Online Test

« Previous Tutorial Next Tutorial »