Skip to content
Related Articles

Related Articles

Compare the Case Insensitive strings in JavaScript

Improve Article
Save Article
  • Last Updated : 07 Oct, 2022
Improve Article
Save Article

Comparing strings in a case insensitive manner means to compare them without taking care of the uppercase and lowercase letters. To perform this operation the most preferred method is to use either toUpperCase() or toLowerCase() function.

  • toUpperCase() function: The str.toUpperCase() function converts the entire string to Upper case. This function does not affect any of the special characters, digits and the alphabets that are already in upper case. 
    Syntax:
string.toUpperCase()
  • toLowerCase() function: The str.toLowerCase() function converts the entire string to lower case. This function does not affect any of the special characters, digits and the alphabets that are already in the lower case. 
    Syntax:
string.toLowerCase()

Example 1: This example uses toUpperCase() function to compare two strings. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JavaScript | Case insensitive
        string comparison
    </title>
</head>
         
<body style = "text-align:center;">
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
    <p id="GFG_up" style="color:green;"></p>
    <button onclick = "myGeeks()">
        Click here
    </button>
    <p id="GFG_down" style="color:green;"></p>
             
    <script>
        var str1 = "this iS geeksForGeeKs";
        var str2 = "This IS GeeksfOrgeeks";
        var p_up = document.getElementById("GFG_up");
        p_up.innerHTML = str1 + "<br>" + str2;
         
        function myGeeks() {
            var p_down = document.getElementById("GFG_down");
            var areEqual = str1.toUpperCase() === str2.toUpperCase();
            p_down.innerHTML = areEqual;
        }
    </script>
</body>
 
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example uses toLowerCase() function to compare two strings. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JavaScript | Case insensitive
        string comparison
    </title>
</head>
         
<body style = "text-align:center;">
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
    <p id="GFG_up" style="color:green;"></p>
    <button onclick = "myGeeks()">
        Click here
    </button>
    <p id="GFG_down" style="color:green;"></p>
             
    <script>
        var str1 = "this iS geeks";
        var str2 = "This IS GeeksfOrgeeks";
        var p_up = document.getElementById("GFG_up");
        p_up.innerHTML = str1 + "<br>" + str2;
         
        function myGeeks() {
            var p_down = document.getElementById("GFG_down");
            var areEqual = str1.toLowerCase() === str2.toLowerCase();
            p_down.innerHTML = areEqual;
        }
    </script>
</body>
 
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example#3: In this example we will use localeCompare function to compare two string. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        JavaScript | Case insensitive
        string comparison
    </title>
</head>
         
<body style = "text-align:center;">
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
    <p id="GFG_up" style="color:green;"></p>
    <button onclick = "myGeeks()">
        Click here
    </button>
    <p id="GFG_down" style="color:green;"></p>
             
    <script>
        var str1 = "this iS geeks";
        var str2 = "This IS GeeksfOrgeeks";
        var p_up = document.getElementById("GFG_up");
        p_up.innerHTML = str1 + "<br>" + str2;
         
        function myGeeks() {
            var p_down = document.getElementById("GFG_down");
            var areEqual = str1.localeCompare(str2, undefined, {sensitivity : 'accent'});
            p_down.innerHTML = areEqual === 0 ? true : false;
        }
    </script>
</body>
 
</html>


Output:

  • Before clicking button

localecompare()

  • After clicking button

localeCompare()


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!