Make includes() case insensitive in JavaScript

avatar

Borislav Hadzhiev

Mon Oct 04 20212 min read

Make includes() case insensitive in JavaScript #

To make the String.includes() method case insensitive in JavaScript, convert both of the strings you're comparing to lowercase.

index.js
// not supported in IE 6-11 const str = 'HELLO WORLD'; const substr = 'hELLo'; // ๐Ÿ‘‡๏ธ true console.log(str.toLowerCase().includes(substr.toLowerCase())); if (str.toLowerCase().includes(substr.toLowerCase())) { // ๐Ÿ‘‰๏ธ the substring is included in the string }

In the code example we've converted both - the string we call String.includes on and the substring to lowercase to make a case insensitive lookup.

We could achieve the same result by converting the strings to uppercase. We just need the strings to be the same case, to be able to determine if the substring is contained in the string.

To perform a case insensitive check whether a string is contained in an array:

  1. call the Array.find method, passing it a function
  2. the function should lowercase the array element and the string and do an equality check
  3. the Array.find method returns the first array element that satisfies the condition
index.js
const arr = ['HELLO', 'WORLD']; const str = 'HeLLo'; const found = arr.find(element => { return element.toLowerCase() === str.toLowerCase(); }); console.log(found); // ๐Ÿ‘‰๏ธ HELLO if (found !== undefined) { // ๐Ÿ‘‰๏ธ string is in array }

The function we passed to the Array.find method gets invoked with each element in the array until it returns a truthy value or iterates over all elements.

To perform the case insensitive check whether the string is contained in the array, we convert both the array element and the string to lowercase.

In the code example, the case insensitive check for the string succeeded and Array.find returned the corresponding array element.

If all of the invocations of the function we passed to Array.find return a falsy value, then the method returns undefined.

The Array.find method stops iterating once its callback returns a truthy value, therefore it only returns the first match.

If you need to perform a case insensitive check whether a string is contained in an array and get all matches:

  1. call the Array.filter method, passing it a function
  2. the function should lowercase the array element and the string and do an equality check
  3. the Array.filter method will return an array of all of the elements that satisfy the condition
index.js
const arr = ['HELLO', 'HeLlO', 'WORLD']; const str = 'HeLLo'; const matches = arr.filter(element => { return element.toLowerCase() === str.toLowerCase(); }); console.log(matches); // ๐Ÿ‘‰๏ธ ['HELLO', 'HeLlO'] if (matches.length > 0) { // ๐Ÿ‘‰๏ธ at least 1 match found in array }

The function we passed to the Array.filter method gets called with each element of the array.

The Array.filter method does not stop iterating once the callback function returns a truthy value and returns an array of all the elements that satisfy the condition.

In our case two elements of the array satisfy the condition and we have both of their values in a brand new array.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee