JavaScript에서 대소문자를 구분하지 않고 문자열 배열을 필터링해 부분 문자열과 일치시키는 방법

JavaScript에서 배열에 담긴 문자열을 검색할 때, 대소문자와 상관없이 특정 부분 문자열과 일치하는 항목만 추출해야 하는 경우가 자주 있습니다. 이럴 때 filter() 메서드와 toLowerCase()를 함께 사용하면 간단하게 해결할 수 있습니다.

1. 문자열 배열 준비하기

먼저 학생 이름이 담긴 객체 배열을 생성합니다.

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

위 배열에는 'John Smith'가 대문자로 시작하는 형태와 모두 소문자인 형태가 함께 존재합니다. 여기서 검색어의 대소문자와 관계없이 두 항목을 모두 찾아내는 것이 목표입니다.

2. filter()와 toLowerCase()로 대소문자 무시하고 매칭하기

filter() 메서드는 조건을 만족하는 요소만 골라 새로운 배열을 반환합니다. 비교 전에 toLowerCase()로 양쪽 문자열을 모두 소문자로 변환하면 대소문자 차이를 무시한 매칭이 가능합니다.

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

var searchName = "John Smith";

console.log(studentDetails.filter(obj =>
    obj.studentName.toLowerCase().indexOf(searchName.toLowerCase()) >= 0));

동작 원리:

• searchName.toLowerCase(): 검색어를 소문자로 변환합니다.
• obj.studentName.toLowerCase(): 배열의 각 이름도 소문자로 변환합니다.
• indexOf(...) >= 0: 검색어가 이름 안에 포함되어 있으면(부분 일치 포함) true를 반환합니다.

참고로 indexOf() 대신 ES6의 includes()를 사용해도 동일한 결과를 얻을 수 있습니다.

3. 프로그램 실행하기

Node.js 환경에서 위 코드를 실행하려면 다음 명령어를 사용합니다. 파일명은 본 예제 기준으로 demo55.js입니다.

node demo55.js

4. 실행 결과

위 프로그램을 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo55.js
[ { studentName: 'John Smith' }, { studentName: 'john smith' } ]

검색어 'John Smith'와 대소문자만 다른 'john smith' 항목까지 함께 필터링된 것을 볼 수 있습니다. 이처럼 filter()와 toLowerCase()를 조합하면 대소문자를 구분하지 않는 유연한 문자열 검색 기능을 손쉽게 구현할 수 있습니다.