Difference between match() and search() in JavaScript

This post is published to provide information about the two methods of JavaScript, that are used to perform searches. Those two methods are:

match() and search() are string methods in JavaScript used to search for a pattern within a string. search() returns the index of the first occurrence of the pattern, while match() returns an array containing all matches of the pattern.

match() vs. search() in JavaScript

The search() method is used when we need to find the index of the first match. Whereas the match() method is used when we need to find all matches in the form of  arrays where each element indicates each match. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>Using search(): <b><span id="one"></span></b></p>
   <p>using match(): <b><span id="two"></span></b></p>

   <script>
      let myString = "Python is Fun. JavaScript is Fun. PHP is Fun.";

      document.getElementById("one").innerHTML = myString.search(/is/g);
      document.getElementById("two").innerHTML = myString.match(/is/g);
   </script>
   
</body>
</html>
Output

Using search():

using match():

The provided code serves as an illustration of how to use the JavaScript search() and match() methods to look for a specific string or pattern within a given string.

The first line of the JavaScript code declares the string variable myString, which contains the phrases "Python is Fun. JavaScript is Fun. PHP is Fun."

The first instance of the pattern /is/g in the variable myString is then located using the search() method. The regular expression pattern /is/g matches every instance of the word "is" in the supplied string.

The index of the pattern's first appearance in the string is returned by the search() method. The HTML element with the id "one" has the result assigned to its innerHTML property.

The pattern /is/g is then searched for throughout the myString variable using the match() method. The array of all instances of the pattern in the string is what the match() method returns. The outcome is assigned to the HTML element with the id "two"'s innerHTML property.

The g in /is/g stands for global, which is a regular expression modifier used to find all matches.

Basically, when our approach is only to check if a search pattern is available in the string, then use the search() method. Otherwise, use the match() method.

The search() method does the job faster than match() because it stops after the first match, whereas match() continues searching for all matches.

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!