Regular Expression Basics

The regular expression is sequence of characters that makes a pattern. The pattern is used for searching text in data. You can create a simple pattern or a complex regular expression in JavaScript.

The regular expression does two kind of work – search and replace text using several of available string methods.

Syntax

The regular expression has a very simple syntax as given below.

/pattern to be matched/ flags or modifiers

Consider the following example to understand how it works.

Regular expression example #1

var firstExp = /brown/i

The expression is stored in the variable firstExp. The /brown/ is the pattern that you will search in the string. The i is a modifier that instructs the search to be case-insensitive. That is, doesn’t matter if the pattern is “BROWN” or “brown“.

RegExp Methods

The Regexp object is regular expression object used to match text with pattern. There are several ways to create this object which we will see later. The RegExp object uses two methods:

• exec()
• test()

Regular expressions are used with the above methods and few other string methods as listed below.

• match( ) – returns an array of all matches or null if not match found.
• matchAll( ) – returns an iterator including capturing group.
• search( ) – test for a match and return the first index or -1 if not found.
• replace( ) – find the match and replace the sub-string with another sub-string.
• replaceAll( ) – find all the matches and replace the sub-string with another sub-string.
• split( ) – use regex or a fixed string to break a string into array of sub-string.

Of these methods, search() and replace will be discussed next.

Searching a string

There are two ways to search for a string within another string.

• search with a string
• search with regular expression

Now we shall see examples of both these methods.

Search with string

Suppose we want to search for word -“red” in a string.

Regular expression example #2

var myString = "This cake is red.";
var value = myString.search("red");
alert(value);

Output #2

search with regular expression

The second method of search uses a regular expression instead of a direct search. Consider the example below.

Regular expression example #3

var myStr = "This is a orange car.";
var value = myStr.search(/orange/);
alert(value);

The string search will match the pattern with the string and find its location.

Output #3

Replacing a string

Similar to search, you have two ways to do the search and replace which are as follows.

• search with string and replace the sub-string.
• search with regular expression and replace the sub-string

The replace () function is used to search and replace a sub-string from the string.

Search with string and replace

In the first method, the replace () method will be given two strings – one search string and another string to replace the search string.

Regular expression example #4

var myStr = "The ball is green.";
var value = myStr.replace("green","red");
alert(value);

In the example script above, the color “green” is search string and the color “red” is the replacement string. If there is a match, the search string will get replaced. However, only one word get replaced, other instances of “green” remain as it is.

Output #4

Search using regular expression and replace

The second method of search and replace is using a regular expression instead of string.

Regular expression example #5

var myStr = "This bag is yellow";
var value = myStr.replace(/yellow/,"Orange");
alert(value);

The search pattern will for “yellow” and replace it with the color “orange“. Only one instance of yellow is replaced, other yellow in the string will remain same. If you want to replace all instances then regular expression allows you to use flags or modifiers.

Output #5

Search with match() method

The match ( ) method search for a string and if there is match it will not return the position but return the matched string itself. With regular expression flags or modifiers you can return all instances of a search string from a text.

Regular expression example #6

<!DOCTYPE html>
<html>
<head>
     <title>Regular expression - match() method</title>
     <meta charset-"utf-8">
</head>
<body>
     <h2 id="demo"></h2>
     <script>
          var myStr = "This bag is yellow";
          var value = myStr.match(/bag/);
          document.getElementById("demo").innerHTML = value;
     </script>
</body>
</html>

In the example above, we search for sub-string “bag” and when a match is found, it is stored in the variable value. The value of variable is output to HTML document.

Output #6

Therefore, the match() method is useful when we need to content of the search string, rather than the position. Another method to fetch the content from a string is split() method.

Split () Method

The split() method is a string method that breaks a string into array of characters or words. You can visit the following link to understand the working of split() method – string.prototype.split().