Check if an Array contains a Substring Match in JavaScript

avatar

Borislav Hadzhiev

Sun Oct 03 20213 min read

banner

Photo by Motoki Tonn

Check if an Array contains a Substring Match - Array.find #

To check if a JavaScript Array contains a substring match:

  1. Call the Array.find method, passing it a function
  2. The function should return true if the substring is contained in any of the array elements
  3. If the conditional check succeeds, Array.find returns the array element and undefined otherwise
index.js
// ๐Ÿ‘‰๏ธ Not Supported in IE 6-11 const array = ['hello', 'world']; const substring = 'hell'; const match = array.find(element => { if (element.includes(substring)) { return true; } }); console.log(match); // ๐Ÿ‘‰๏ธ hello if (match !== undefined) { // array contains substring match }

The function we passed to the Array.find method gets invoked with each element of the array until it returns a truthy value or exhausts the array's elements.

If the function never returns a truthy value, then Array.find returnsundefined.

In the code snippet we use the String.includes method to check if the substring is contained in the array element.

Note that the String.includes method is case sensitive. For case insensitive conditional check, convert both the substring and the array element to lowercase.

If you have to support IE 9-11, scroll down to the Array.filter section.

Check if an Array contains a Substring Match - Array.findIndex #

To check if a JavaScript Array contains a substring match:

  1. Call the Array.findIndex method, passing it a function
  2. The function should return true if the substring is contained in the array element
  3. If the conditional check succeeds, Array.findIndex returns the index of the array element that matches the substring
index.js
// ๐Ÿ‘‰๏ธ Not Supported in IE 6-11 const array = ['hello', 'world']; const substring = 'hell'; const index = array.findIndex(element => { if (element.includes(substring)) { return true; } }); console.log(index); // ๐Ÿ‘‰๏ธ 0 if (index !== -1) { // array contains substring match }

The function we passed to the Array.findIndex method gets called with each element in the array, until it returns a truthy value or the iteration has completed.

If all of the calls of the callback function return falsy values, then findIndex returns -1.

You would use the findIndex method instead of find if you have to perform operations based on the element's index in the array, e.g. remove an element.

Check if an Array contains a Substring Match - Array.filter #

To check if a JavaScript Array contains a substring match:

  1. Call the Array.filter method, passing it a function
  2. The function should return true if the substring is contained in the array element
  3. If the conditional check succeeds, Array.filter returns an array with all the elements, that satisfy the condition
index.js
// ๐Ÿ‘‰๏ธ Supported in IE 9-11 const array = ['hello', 'world']; const substring = 'hell'; const matches = array.filter(element => { if (element.indexOf(substring) !== -1) { return true; } }); console.log(matches); // ๐Ÿ‘‰๏ธ [ 'hello' ] if (matches.length > 0) { // array contains substring match }

The function we passed to the Array.filter method gets invoked with each element in the array, regardless if the condition is satisfied.

This is useful in case you have multiple elements in the array that satisfy the condition and you need all of their values.

In the if statement we've used the String.indexOf method. If the substring is contained in the string, the method returns the index of the match. If it isn't, the method returns -1.

The only reason to use String.indexOf method in this case is if you have to support IE 9-11. Otherwise use the String.includes method, because it is more intuitive and readable.

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