JavaScript filter array by multiple strings

Filtering an array by multiple strings in JavaScript involves identifying elements that match any string from a given list. This is commonly used in search filters, dynamic matching, or data processing tasks. JavaScript provides simple tools like the filter method and techniques such as includes for exact matches or regular expressions for pattern-based matching. These approaches help efficiently narrow down arrays based on specific criteria.

Approaches to Filter Array by Multiple Strings

Here are three effective approaches to filter an array by multiple strings in JavaScript:

• Using filter with includes (Recommended)
• Using Regular Expressions
• Using indexOf() for Substring Matching

Using filter with includes (Recommended)

The includes method checks if an array contains a specific element, making it ideal for simple, exact matches. This is the most common and efficient approach for filtering by multiple exact strings.

const array = ["apple", "banana", "cherry", "date"];
const filters = ["apple", "date"];

const result = array.filter(item => filters.includes(item));
console.log(result);

[ 'apple', 'date' ]

Using Regular Expressions

The join("|") method creates a regex pattern to match any filter string, making it ideal for dynamic or flexible matching. Regular expressions are case-sensitive by default but can be made case-insensitive by adding the "i" flag.

const array = ["apple", "banana", "cherry", "date"];
const filters = ["apple", "date"];

// Create regex pattern from filters
const regex = new RegExp(filters.join("|"));
const result = array.filter(item => regex.test(item));
console.log(result);

[ 'apple', 'date' ]

Case-Insensitive Regex Example

const array = ["Apple", "banana", "Cherry", "DATE"];
const filters = ["apple", "date"];

// Case-insensitive regex
const regex = new RegExp(filters.join("|"), "i");
const result = array.filter(item => regex.test(item));
console.log(result);

[ 'Apple', 'DATE' ]

Using indexOf() for Substring Matching

The indexOf() method searches for substrings within strings. This approach filters elements that contain ALL specified strings as substrings, useful when you need every filter term to be present.

const details = [
   'My first Name is John and last Name is Smith',
   'My first Name is John and last Name is Doe',
   'Student first Name is John and last Name is Taylor'
];

const matchWords = ['John', 'Doe'];
const result = [];

for (let i = 0; i < details.length; i++) {
   let hasAllWords = true;
   
   for (let j = 0; j < matchWords.length; j++) {
      if (details[i].indexOf(matchWords[j]) === -1) {
         hasAllWords = false;
         break;
      }
   }
   
   if (hasAllWords) {
      result.push(details[i]);
   }
}

console.log(result);

[ 'My first Name is John and last Name is Doe' ]

Comparison of Methods

Conclusion

Use includes() for exact string matching, regular expressions for flexible pattern matching, and indexOf() when all filter terms must exist as substrings. The includes() method is recommended for most filtering scenarios due to its simplicity and performance.