JavaScript Regular Expressions

By | August 26, 2022

A regular expression is a sequence of characters that forms a search pattern.

The search pattern can be used for text search and text replace operations.

What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.

When you search for data in a text, you can use this search pattern to describe what you are searching for.

A regular expression can be a single character, or a more complicated pattern.

Regular expressions can be used to perform all types of text search and text replace operations.

Syntax

/pattern/modifiers;

Example

/w3schools/i;

Example explained:

/w3schools/i  is a regular expression.

w3schools  is a pattern (to be used in a search).

i  is a modifier (modifies the search to be case-insensitive).

Using String Methods

In JavaScript, regular expressions are often used with the two string methodssearch() and replace().

The search() method uses an expression to search for a match, and returns the position of the match.

The replace() method returns a modified string where the pattern is replaced.

Using String search() With a String

The search() method searches a string for a specified value and returns the position of the match:

Example

Use a string to do a search for “W3schools” in a string:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Search a string for "W3Schools", and display the position of the match:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools!"; 
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>

Result:

JavaScript String Methods

Search a string for “W3Schools”, and display the position of the match:

6

Using String search() With a Regular Expression

Example:

Use a regular expression to do a case-insensitive search for “w3schools” in a string:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search a string for "w3Schools", and display the position of the match:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools!"; 
let n = text.search(/w3Schools/i);
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>

Result:

JavaScript Regular Expressions

Search a string for “w3Schools”, and display the position of the match:

6

Using String replace() With a String

The replace() method replaces a specified value with another value in a string:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>

Result:

Result shown in your browser.

Use String replace() With a Regular Expression

Example

Use a case insensitive regular expression to replace Microsoft with W3Schools in a string:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace(/microsoft/i, "W3Schools");
}
</script>
</body>
</html>

Result:

Result shown in your browser.

Did You Notice?

Regular expression arguments (instead of string arguments) can be used in the methods above.
Regular expressions can make your search much more powerful (case insensitive for example).

Regular Expression Modifiers

Modifiers can be used to perform case-insensitive more global searches:

ModifierDescription
iPerform case-insensitive matching
gPerform a global match (find all matches rather than stopping after the first match)
mPerform multiline matching

Regular Expression Patterns

Brackets are used to find a range of characters:

ExpressionDescription
[abc]Find any of the characters between the brackets
[0-9]Find any of the digits between the brackets
(x|y)Find any of the alternatives separated with |

Metacharacters are characters with a special meaning:

MetacharacterDescription
\dFind a digit
\sFind a whitespace character
\bFind a match at the beginning of a word like this: \bWORD, or at the end of a word like this: WORD\b
\uxxxxFind the Unicode character specified by the hexadecimal number xxxx

Quantifiers define quantities:

QuantifierDescription
n+Matches any string that contains at least one n
n*Matches any string that contains zero or more occurrences of n
n?Matches any string that contains zero or one occurrences of n

Using the RegExp Object

In JavaScript, the RegExp object is a regular expression object with predefined properties and methods.

Using test()

The test() method is a RegExp expression method.

It searches a string for a pattern, and returns true or false, depending on the result.

The following example searches a string for the character “e”:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Search for an "e" in the next paragraph:</p>
<p id="p01">The best things in life are free!</p>
<p id="demo"></p>
<script>
let text = document.getElementById("p01").innerHTML;
const pattern = /e/;
document.getElementById("demo").innerHTML = pattern.test(text);
</script>
</body>
</html>

Result:

JavaScript Regular Expressions

Search for an “e” in the next paragraph:

The best things in life are free!

true

You don’t have to put the regular expression in a variable first. The two lines above can be shortened to one:/e/.test(“The best things in life are free!”);

Using exec()

The exec() method is a RegExp expression method.

It searches a string for a specified pattern, and returns the found text as an object.

If no match is found, it returns an empty (null) object.

The following example searches a string for the character “e”:

Example

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p id="demo"></p>
<script>
const obj = /e/.exec("The best things in life are free!");
document.getElementById("demo").innerHTML =
"Found " + obj[0] + " in position " + obj.index + " in the text: " + obj.input;
</script>
</body>
</html>

Result:

JavaScript Regular Expressions

Found e in position 2 in the text: The best things in life are free!

Leave a Reply

Your email address will not be published. Required fields are marked *