How to do case insensitive string comparison of strings in JavaScript

Front End Technology Javascript Object Oriented Programming Web Development

In this tutorial, we will learn how to do a case-insensitive string comparison of strings in JavaScript. Case in-sensitive simply means the word or string should mean the same even if they are written in lower or upper case. In this kind of case in-sensitive comparison is observed in the google search bar, wherein if the user type “tUtoriAlsPOint” or “Tutorialspoint” the results are the same, similarly it is used in search bar too. There are 4 ways to do this,

toUpperCase()
toLowerCase()
localeCompare()
RegExp()

Using the toUpperCase() Method

When we use the toUpperCase() method on a string, the string gets converted into an all uppercase string. No changes will be made to the numbers, special characters({, }, >, $, etc.), and alphabets that are already in upper case.

Syntax

str.toUpperCase();

Parameter

str − the text that needs to be converted to upper case

Example

In the following example, we have picked two strings that are identical but differ in case (Lowercase and Uppercase). We use the toUpperCase() method to transform both strings to uppercase before comparing them.


<html>
<body>
   <h2>Case insensitive comparison using <i>toUpperCase()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "TexT with uPPer CAsE aND loWeR cASe";
      var str2 = "TexT with Upper Case aND LoWER CAse";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1+ "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      if (str1.toUpperCase() === str2.toUpperCase()) {
         output.innerHTML += "The strings are converted to Uppercase and they are equal" + "<br/>";
      } else {
         output.innerHTML += "The strings are converted to Uppercase and they are not equal";
      }
   </script>
</body>
</html>

Using the ToLowerCase() Method

Similar to toUpperCase(), the string is converted to an all-lowercase string in this method. No changes will be made to the numbers, special characters({, }, >, $, etc.), or alphabets that are already in lower case

Syntax

str.toLowerCase();

Parameter

str − the text that gets converted to lowercase

Example

In the example below, we've used two strings that are identical but differing case-wise (Lowercase and Uppercase). Both strings are converted to lowercase using the toLowerCase() method before being compared to one another.


<html>
<body>
   <h2>Case insensitive comparison using <i>toLowerCase()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "TutorialsPoint";
      var str2 = "tuTorialspoInt";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      if (str1.toLowerCase() === str2.toLowerCase()) {
         output.innerHTML += "The strings are converted to Lowercase and they are equal";
      } else {
         output.innerHTML += "The strings are converted to Uppercase and they are not equal";
      }
   </script>
</body>
</html>

Using the localeCompare() Method

A number is returned (could be 0, -ve number, +ve number) by the localeCompare() method that indicates whether a reference string comes before, after, or is identical to the given string in the sort order. This is a better option to go with when there is a possibility of comparison between 2 different languages, we can customize the comparison based on our requirements.

Syntax

localeCompare(compareString, locales, options)

Parameters

compareString − The reference string is compared to this string
locales − Language Tag.
options − You should enter the specific locale you are working with.

Example

In the following example, we have picked two identical strings but differ in case and language. The localeCompare() after comparing both the strings, return 0 if two strings are equal.


<html>
<body>
   <h2>Case insensitive comparison using <i>localeCompare()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "apPlE";
      var str2 = "áppLE";
      var output = document.getElementById("str1");
      function caseInsensitive(a, b) {
         return a.localeCompare(b, 'en', {
            sensitivity: 'base'
         }) === 0;
      }
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      output.innerHTML += "str1 === str2 is " + caseInsensitive(str1, str2);
   </script>
</body>
</html>

Using the RegExp() Object

RegExp() stands for Regular Expression, it is a pattern of characters which is used for pattern matching. In this case, we use the test() function to do a search and see if the pattern matches the provided text. If the text matches the function will return true.

Syntax

RegExp('^' + str + '$', 'i')

Parameter Details

^ − Start of the string.
$ − End of the string.
str − The pattern that needs to be followed.
i − Flag variable that says whether a case should be ignored or not. while matching the pattern with a string.

Example

In this example we are using the RegExp() object to create a pattern and using test() function to see if the pattern matches with the string. test() function returns a boolean value based on the comparison and string


<html>
<body>
   <h2>Case insensitive comparison using <i>RegEx()</i> object</h2>
   <div id="str1"></div>
   <script>
      var str1 = "tutorialspoint";
      var str2 = "TUTORIALSPOINT";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      let pattern = new RegExp('^' + str1 + '$', 'i');
      if (pattern.test(str2)) {
         output.innerHTML += "str1 and str2 are same";
      } else {
         output.innerHTML += "str1 and str2 are not same";
      }
   </script>
</body>
</html>