JavaScript Pattern Matching Examples

Introduction

In JavaScript, pattern matching is a powerful tool that allows you to search, replace, and manipulate strings using regular expressions. Regular expressions, or RegExp for short, are a concise and flexible way to describe patterns in strings. They are widely used in many programming languages and can be used to perform a variety of tasks, such as validating input, extracting information, and replacing text.

In this article, we will delve into the world of pattern matching in JavaScript and explore the various methods and techniques available for working with regular expressions. We will cover the search, replace, match, matchAll, and split methods, as well as the RegExp object. Whether you are a beginner or an experienced developer, understanding how to use pattern matching in JavaScript is an essential skill for working with strings and text data.

 

Using the search() method

The search method is used to search a string for a specified pattern and return the index at which the pattern was found. If the pattern is not found, search returns -1.

Here's an example of how to use the search method by checking for where word "quick" within a string starts from.

const str = "The quick brown fox";
const pattern = /quick/;
const index = str.search(pattern);
console.log(index);

Output

4

In this example, the search method searches the string 'The quick brown fox' for the pattern /quick/ and returns the index at which the pattern was found (4).

 

Using the replace() method

The replace method is used to search a string for a specified pattern and replace it with a specified string.

Here's an example of how to use the replace method where we search for a particular word or character set and replace it with a passed value.

const str = "The quick brown fox";
const pattern = /quick/;
const newStr = str.replace(pattern, "slow");
console.log(newStr);

Output

The slow brown fox

In this example, the replace method searches the string 'The quick brown fox' for the pattern /quick/ and replaces it with the string 'slow'. The resulting string is 'The slow brown fox'.

 

Using the match() method

The match method is used to search a string for a specified pattern and return an array of matched items. Here's an example of how to use the match method

const str = "The quick brown fox";
const pattern = /\\b\\w{3}\\b/g;
const matches = str.match(pattern);
console.log(matches);

Output

[ 'The', 'fox' ]

In this example, the match method searches the string 'The quick brown fox' for the pattern /\\b\\w{3}\\b/g (which matches any three-letter word) and returns an array of matched items: ['The', 'fox'].

 

Using the matchAll() method

The matchAll method is used to search a string for all occurrences of a specified pattern and return an iterator of matched items.

Here's an example of how to use the matchAll method:

const str = "The quick brown fox";
const pattern = /\\b\\w{3}\\b/g;
const iterator = str.matchAll(pattern);

for (const match of iterator) {
    console.log(match);
}

Output

[ 'The', index: 0, input: 'The quick brown fox', groups: undefined ]
[ 'fox', index: 16, input: 'The quick brown fox', groups: undefined ]

In this example, the matchAll method searches the string 'The quick brown fox' for all occurrences of the pattern /\\b\\w{3}\\b/g (which matches any three-letter word) and returns an iterator of matched items. The for-of loop iterates over the iterator and logs each matched item to the console.

 

Using the split() method

The split method is used to split a string into an array of substrings based on a specified pattern.

Here's an example of how to use the split method:

const str = "The quick brown fox";
const pattern = /\\s/;
const words = str.split(pattern);

console.log(words);

Output

[ 'The', 'quick', 'brown', 'fox' ]

In this example, the split method splits the string 'The quick brown fox' into an array of substrings based on the pattern /\\s/ (which matches any white space character). The resulting array is ['The', 'quick', 'brown', 'fox'].

 

Using the RegExp() method

The RegExp constructor is used to create a regular expression object.

Here's an example of how to use the RegExp constructor:

const pattern = new RegExp("\\\\b\\\\w{3}\\\\b", "g");
const str = "The quick brown fox";
const matches = str.match(pattern);

console.log(matches);

Output

[ 'The', 'fox' ]

In this example, the RegExp constructor is used to create a regular expression object that matches any three-letter word ('\\\\b\\\\w{3}\\\\b'). This regular expression object is then passed to the match method, which searches the string 'The quick brown fox' for the pattern and returns an array of matched items: ['The', 'fox'].

 

Summary

That's a brief overview of some of the ways you can use pattern matching in JavaScript. Regular expressions can be a powerful tool for searching, replacing, and manipulating strings and these methods provide a way to use them in your JavaScript code.

 

References

String.prototype.search() - JavaScript | MDN (mozilla.org)
String.prototype.match() - JavaScript | MDN (mozilla.org)
RegExp.prototype[@@replace]() - JavaScript | MDN (mozilla.org)
String.prototype.matchAll() - JavaScript | MDN (mozilla.org)
RegExp.prototype[@@split]() - JavaScript | MDN (mozilla.org)
RegExp - JavaScript | MDN (mozilla.org)