How to make Array.indexOf() case insensitive in JavaScript ?

Last Updated : 31 Dec, 2019

The task is to make the Array.indexOf() method case insensitive. Here are a few of the most techniques discussed with the help of JavaScript.

The .toLowerCase() method: Transform the search string and elements of the array to the lower case using .toLowerCase() method, then perform the simple search. Below example illustrate the method.

Example 1:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to use Array.indexOf() case
        insensitive in JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color: green"> 
        Geeksforgeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 20px;font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;
                            font-size: 26px; 
                            font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        var arr = ['GFG_1', 'geeks',
            'Geeksforgeeks', 'GFG_2', 'gfg'];
          
        var el = 'gfg_1';
          
        el_up.innerHTML = "Click on the button for "
                + "case-insensitive search. <br>Array = '"
                + arr + "'<br>Element = '" + el + "'";
  
        function gfg_Run() {
            res = arr.findIndex(item => 
                el.toLowerCase() === item.toLowerCase());
              
            el_down.innerHTML = "The index of '" + 
                        el + "' is '" + res + "'.";
        }
    </script>
</body>
  
</html>

Output:

The .toUpperCase() method: Transform the search string and elements of the array to the upper case using .toUpperCase() method, then perform the simple search. Below example illustrates this method.

Example 2:

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to use Array.indexOf() case
        insensitive in JavaScript ?
    </title>
</head>
  
<body style="text-align:center;">
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style="font-size:20px;
                        font-weight: bold;">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;
            font-size: 26px; font-weight: bold;">
    </p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
      
        var arr = ['GFG_1', 'geeks',
                'GeeksforGeeks', 'GFG_2', 'gfg'];
          
        var el = 'gfg_1';
          
        el_up.innerHTML = "Click on the button for "
                + "case-insensitive search. <br>Array = '"
                + arr + "'<br>Element = '" + el + "'";
  
        function gfg_Run() {
            var res = arr.find(key => key.toUpperCase() === 
                            el.toUpperCase()) != undefined;
            if (res) {
                res = 'present';
            } else {
                res = 'absent';
            }
            el_down.innerHTML = "The element '" + el
                + "' is '" + res + "' in the array.";
        }
    </script>
</body>
  
</html>

Output:

My Personal Notes

Related Articles