JavaScript에서 문자열을 분할해 배열 내 요소를 검색하는 방법

문자열 배열 검색 개요

문자열로 구성된 배열 하나와, 그 배열 안에서 찾고자 하는 문자열이 주어졌다고 가정해 보겠습니다. 이때 JavaScript의 filter() 메서드를 활용하면, 사용자가 입력한 값에 포함된 모든 키워드를 담고 있는 요소만 골라낼 수 있습니다.

핵심 아이디어는 간단합니다. 배열의 각 요소를 순회하면서 사용자 입력이 해당 문자열에 존재하는지 확인하고, 조건을 만족하는 요소만 새로운 배열로 반환하는 것입니다.

예제 1: split()으로 입력값을 나누어 검색하기

첫 번째 방법은 입력 문자열을 공백 기준으로 분할한 뒤, 각 조각이 배열 요소에 모두 포함되어 있는지 검사하는 방식입니다.

const deliveries = ["14/02/2020, 11:47,G12, Kalkaji", "13/02/2020, 11:48,A59, Amar Colony"];
const input = "g12, kal";
const pn = input.split(" ");
const requiredDeliveries = deliveries.filter(delivery =>
pn.every(p =>
delivery.toLowerCase()
.includes(p.toLowerCase())));
console.log(requiredDeliveries);

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

["14/02/2020, 11:47,G12, Kalkaji"]

동작 원리

입력값 "g12, kal"은 공백을 기준으로 ["g12,", "kal"]로 분할됩니다. 이후 every() 메서드가 각 조각마다 includes()를 호출하며, 대소문자 차이를 없애기 위해 toLowerCase()로 양쪽을 모두 소문자로 변환한 후 비교합니다. 모든 조각이 포함되어 있을 때만 해당 배송 정보가 결과 배열에 유지됩니다.

예제 2: split 없이 단순 포함 여부로 검색하기

조금 더 간결한 접근 방식으로, 입력값을 나누는 단계를 생략하고 전체 문자열의 포함 여부만 확인할 수도 있습니다.

const deliveries = ["14/02/2020, 11:47,G12, Kalkaji", "13/02/2020, 11:48,A59, Amar Colony"];
const input = "g12, kal";
const requiredDeliveries = deliveries
.filter(delivery =>
delivery.toLowerCase()
.includes(input.toLowerCase()));
console.log(requiredDeliveries);

이 방법은 코드가 짧아 가독성이 좋다는 장점이 있습니다.

출력 결과

["14/02/2020, 11:47,G12, Kalkaji"]

주의 사항

다만 두 번째 방법을 사용할 때는 순서에 민감하다는 점을 기억해야 합니다. 즉, "AB"는 "ab"나 "Ab"와는 일치하지만, 글자 순서가 바뀐 "BA"나 "ba"와는 일치하지 않습니다. 반면 첫 번째 방법처럼 입력을 분할하면 각 키워드가 어느 위치에 있든 독립적으로 검사되므로, 보다 유연한 검색이 가능합니다.