How to Perform Case-Insensitive includes() Checks in JavaScript
In JavaScript, a standard includes() check on a string or an array is case-sensitive, meaning 'a' is not the same as 'A'. To perform a case-insensitive check, you must first normalize the case of the strings being compared by converting them both to either lowercase or uppercase.
This guide will demonstrate the correct and modern way to perform a case-insensitive "includes" check for both strings and arrays of strings.
Case-Insensitive includes() on a String
The String.prototype.includes() method is inherently case-sensitive. To make it case-insensitive, you must convert both the main string and the substring to the same case before performing the check.
For example, a simple includes() check will fail if the casing is different.
// Problem: This check fails because of different casing.
const mainString = 'Hello World';
const substring = 'world';
console.log(mainString.includes(substring)); // Output: false
The solution is to convert both strings to lowercase using toLowerCase() before calling includes().
const mainString = 'Hello World';
const substring = 'world';
const hasSubstring = mainString.toLowerCase().includes(substring.toLowerCase());
console.log(hasSubstring); // Output: true
if (hasSubstring) {
console.log('The substring was found (case-insensitive).');
}
Output:
true
The substring was found (case-insensitive).
This is the standard and most readable way to solve the problem.
Case-Insensitive includes() on an Array of Strings
Similarly, Array.prototype.includes() performs a strict, case-sensitive comparison. To check if an array contains a specific string regardless of its case, you cannot use includes() directly. Instead, you must iterate over the array and compare each element in a case-insensitive way. The some() method is perfect for this.
For example, a simple includes() check will fail to find "Alice" because the casing is different.
// Problem: How to find a name in this array regardless of its case?
const names = ['Alice', 'Bob', 'Charlie'];
const searchName = 'alice';
console.log(names.includes(searchName)); // Output: false
The Core Method (Recommended): some()
The Array.prototype.some() method tests whether at least one element in the array passes a test. It stops iterating and returns true as soon as it finds a match, making it highly efficient.
Solution:
const names = ['Alice', 'Bob', 'Charlie'];
const searchName = 'alice';
const hasName = names.some(name => name.toLowerCase() === searchName.toLowerCase());
console.log(hasName); // Output: true
if (hasName) {
console.log('The name was found in the array.');
}
Output:
true
The name was found in the array.
This is the recommended best practice for checking for the existence of a string in an array in a case-insensitive manner.
An Alternative Method: findIndex()
The Array.prototype.findIndex() method works similarly to some(), but instead of returning true or false, it returns the index of the first element that passes the test. If no element passes, it returns -1.
Solution:
const names = ['Alice', 'Bob', 'Charlie'];
const searchName = 'alice';
const index = names.findIndex(name => name.toLowerCase() === searchName.toLowerCase());
console.log(index); // Output: 0
if (index !== -1) {
console.log(`The name was found at index ${index}.`);
} else {
console.log('The name was not found.');
}
Output:
0
The name was found at index 0.
This method is useful when you not only need to know if the element exists, but also where it is in the array.
How Case Normalization Works
The technique at the heart of all these solutions is case normalization. By converting both strings to the same case (either toLowerCase() or toUpperCase()), you eliminate case differences as a factor in the comparison.
'Hello'.toLowerCase() === 'hello'.toLowerCase() // true
'Hello'.toUpperCase() === 'hello'.toUpperCase() // true
It doesn't matter which case you choose, as long as you are consistent on both sides of the comparison. toLowerCase() is the more common convention.
Conclusion
Performing case-insensitive includes() checks in JavaScript requires a simple, extra step of case normalization.
- For a String, convert both the main string and the substring to the same case before calling
.includes():mainString.toLowerCase().includes(substring.toLowerCase()) - For an Array of strings, you cannot use
.includes()directly. The recommended best practice is to use thesome()method to iterate and perform a case-insensitive comparison on each element:array.some(item => item.toLowerCase() === searchString.toLowerCase())