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: falseThe 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).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: falseThe 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.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.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() // trueConclusion
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())