Make Array.indexOf() Case Insensitive In JavaScript

The Array.indexOf() function is used to get an element’s index in the array. It is useful for simple string elements with no uppercase characters. But not all strings are that simple in practice, so we need a more flexible function. So, today we will show you how to make Array.indexOf() case insensitive in JavaScript.

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

First, let’s learn about the syntax of the Array.indexOf() function.

Syntax:

indexOf(search, from)

Parameters:

• search: the value used to search in array.
• from: the starting position of the search. The default is 0.

Array.indexOf() returns the first index position of the search value. If the search value is not found, it returns -1.

Below are the ways we make Array.indexOf() case insensitive.

Using map() and toLowerCase()

We have already introduced the syntax and usage of the map() through the example here.

The toLowerCase() function converts a string containing uppercase characters to a lowercase string.

toLowerCase() syntax:

string.toLowerCase()

Description:

The function has no parameters to be passed. It converts all uppercase characters in the string to lowercase and does not change the original string.

First, we convert the original array into an array containing all lowercase elements using map() and toLowerCase(). Then we also convert the search value to lowercase with toLowerCase() and perform the search using the indexOf() function. See the example below to understand better.

const words = ["Learn", "Share", "IT"]
console.log('Source Array:', words)
const search = 'it'
console.log('Search:', search)

function insensitiveIndexOf(arr, search){

  // Convert array to lowercase array using map() and toLowerCase()
  const lwcArr = arr.map(element => element.toLowerCase())

  // Use indexOf() with all lowercase values
  return lwcArr.indexOf(search.toLowerCase())

}

console.log(`Index of '${search}': ${insensitiveIndexOf(words, search)}`) // 2

Output:

Source Array: [ 'Learn', 'Share', 'IT' ]
Search: it
Index of 'it': 2

Using map() and toUpperCase()

toUpperCase() syntax:

string.toUpperCase( )

Description:

The function has no parameters to be passed. It converts all lowercase characters in the string to uppercase and does not change the original string.

Since the idea here is that we convert all the elements in the array and the search value to the same type, in this case, using toLowerCase() or toUpperCase() will also get the same result. Try replacing the position of toLowerCase() in the above example with toUpperCase() to verify that!

const words = ["Learn", "Share", "IT"]
console.log('Source Array:', words)
const search = 'iT'
console.log('Search:', search)

function insensitiveIndexOf(arr, search){

  // Convert array to uppercase array using map() and toUpperCase()
  const upcArr = arr.map(element => element.toUpperCase())

  // Use indexOf() with all uppercase values
  return upcArr.indexOf(search.toUpperCase())

}

console.log(`Index of '${search}': ${insensitiveIndexOf(words, search)}`) // 2

Output:

Source Array: [ 'Learn', 'Share', 'IT' ]
Search: iT
Index of 'iT': 2

Using Array.findIndex()

Array.indexOf() is only useful for simple cases like finding an exact string. If your search condition is a bit complicated, you should use Array.findIndex().

With findIndex(), we no longer need to use map() to convert all array elements to lowercase or uppercase. It will automatically iterate through all the array elements and return the element’s index that satisfies the specified condition. Like this:

const words = ["Learn", "Share", "IT"]
console.log('Source Array:', words)
const search = 'SHARE'
console.log('Search:', search)

// Insensitive search with findIndex() and toLowerCase()
const result = words.findIndex(element => element.toLowerCase() === search.toLowerCase())

console.log(`Index of ${search}: ${result}`) // 1

Output:

Source Array: [ 'Learn', 'Share', 'IT' ]
Search: SHARE
Index of SHARE: 1

Looks more concise and readable than the above two methods, right?

Summary

We have shown you three ways to make Array.indexOf() case insensitive in JavaScript. If you are using ES6 for your project, use findIndex() instead of indexOf(), as it is best practice for this case.

Thank you for reading!

Maybe you are interested:

• Convert all Array Elements to Uppercase in JavaScript
• Sort an Array of strings ignoring the Case in JavaScript

Cora Lopez

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.

---

Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java