Table of Contents

URL: https://www.progressiverobot.com/js-string-match/

String.prototype.match() (aka: the match method on strings) can allow you to switch out strings or set conditions if a string or any data is matched. It then stores that data in a new array.

First the syntax and then the explanation:

				
					
let newArray = string.match(condition);

Terminology

match illustration for: Terminology

The string match() method will return an array with the items being matches from a provided regular expression found in the string. You can read more about regular expressions in JavaScript here.

Remember, when all conditions are matched, those results will be stored in a new array.

Take the following example:

				
					
const intro = "Hello Alligators, Hello Devs, how are you?"



const regex = /Hello/g;



const greeting = intro.match(regex);

The above will give us an array like this: ["Hello", "Hello"]. This works fine if we know the exact string we're looking to match, but what about dynamic content or an actual use case?

Here's a simple example that finds repeated letters in a string:

				
					
const str = 'See you later, Alligator! Not so soon baboon!';

const matches = str.match(/([a-z])\1+/gi);



console.log('H' + matches.join(""));

// "Heelloooo"

Though these are simple examples, the deeper you learn about regular expressions, the more powerful this string method becomes. The simple use of i for insensitive case allows the match method to highlight more entries.

—

The match method has 3 modes…

  • 1st: If the g(global) flag is used for your RegEx, you'll get all results stored in an array.
  • 2nd: If there are no g flag used, the first match will return an array with keys/values sharing index of the first matched expression, the full input and then the capturing groups. In other words, the same result as with using RegExp.exec().
				
					
let newYear = "Happy New Year";

let results = newYear.match(/new/i);

// [ 'New', index: 6, input: 'Happy New Year', groups: undefined ]
  • 3rd: If there's no match, the method returns null, or, with the following code, an empty array:
				
					
let results = newYear.match(regex) || [];

Conclusion

Match is a fun little method that can be used in a lot of creative ways like pulling out keywords from a paragraph or replacing words if the condition matches the regex. Take the time to learn about <^>Regular Expressions<^> in JavaScript. It'll make match even more useful for you.