JavaScript filter an array of strings, matching case insensitive substring?

To filter an array of strings with case-insensitive matching, use JavaScript's filter() method combined with toLowerCase() and indexOf().

Setting Up the Data

Let's start with an array of student objects containing names with different cases:

let studentDetails = [
    {studentName: "John Smith"},
    {studentName: "john smith"},
    {studentName: "Carol Taylor"},
    {studentName: "JOHN TAYLOR"},
    {studentName: "alice johnson"}
];

console.log("Original array:", studentDetails);

Original array: [
  { studentName: 'John Smith' },
  { studentName: 'john smith' },
  { studentName: 'Carol Taylor' },
  { studentName: 'JOHN TAYLOR' },
  { studentName: 'alice johnson' }
]

Using filter() with indexOf()

The most common approach uses indexOf() to check if the search term exists within each string:

let studentDetails = [
    {studentName: "John Smith"},
    {studentName: "john smith"},
    {studentName: "Carol Taylor"},
    {studentName: "JOHN TAYLOR"},
    {studentName: "alice johnson"}
];

var searchName = "John";

let filteredStudents = studentDetails.filter(obj => 
    obj.studentName.toLowerCase().indexOf(searchName.toLowerCase()) >= 0
);

console.log("Filtered results:", filteredStudents);

Filtered results: [
  { studentName: 'John Smith' },
  { studentName: 'john smith' },
  { studentName: 'JOHN TAYLOR' },
  { studentName: 'alice johnson' }
]

Using includes() Method

A more modern and readable approach uses the includes() method:

let studentDetails = [
    {studentName: "John Smith"},
    {studentName: "john smith"},
    {studentName: "Carol Taylor"}
];

var searchName = "smith";

let result = studentDetails.filter(obj => 
    obj.studentName.toLowerCase().includes(searchName.toLowerCase())
);

console.log("Using includes():", result);

Using includes(): [
  { studentName: 'John Smith' },
  { studentName: 'john smith' }
]

Filtering Simple String Arrays

For arrays of plain strings (not objects), the syntax is simpler:

let names = ["John Smith", "jane doe", "CAROL TAYLOR", "bob wilson"];
let searchTerm = "john";

let filtered = names.filter(name => 
    name.toLowerCase().includes(searchTerm.toLowerCase())
);

console.log("Filtered names:", filtered);

Filtered names: [ 'John Smith' ]

Comparison of Methods

Creating a Reusable Function

function filterByName(array, searchTerm, propertyName = 'studentName') {
    return array.filter(item => 
        item[propertyName].toLowerCase().includes(searchTerm.toLowerCase())
    );
}

let students = [
    {studentName: "Alice Brown"},
    {studentName: "BOB GREEN"},
    {studentName: "charlie white"}
];

console.log(filterByName(students, "brown"));

[ { studentName: 'Alice Brown' } ]

Conclusion

Use filter() with toLowerCase() and includes() for case-insensitive substring matching. The includes() method is more readable than indexOf() and is the modern standard for substring searches.