JavaScript의 indexOf() 다중 검색에 대해 알아보자

1. 개요

JavaScript의 indexOf() 메소드는 특정 문자열이 다른 문자열에서 처음으로 등장하는 위치를 찾아주는 함수입니다. 그러나 이 메소드는 기본적으로 하나의 위치만을 반환하며, 만일 특정 문자열이 여러 번 나타난다면, 첫 번째 등장 위치만을 반환합니다.

2. 다중 검색

그럼 만일 특정 문자열이 여러 번 나타날 수도 있다면 어떻게 해야 할까요? indexOf() 메소드는 이러한 경우에도 대응할 수 있도록 도와줍니다. 몇 가지 방법을 살펴보겠습니다.

2.1. 반복문을 사용하는 방법

가장 간단한 방법은 반복문을 사용하여 모든 위치를 찾는 것입니다. 예시를 통해 살펴보겠습니다.

const string = "JavaScript는 JavaScript 기반으로 작성된 프로그래밍 언어입니다.";
const searchStr = "JavaScript";

let positions = [];

let index = string.indexOf(searchStr);

while (index !== -1) {
  positions.push(index);
  index = string.indexOf(searchStr, index + 1);
}

console.log(positions); // 결과: [0, 10]

위 코드에서는 먼저 문자열과 검색할 문자열(searchStr)을 정의합니다. 그리고 빈 배열인 positions를 선언합니다. while 반복문은 string.indexOf() 메소드가 -1을 반환할 때까지 실행됩니다.

반복문 안에서 현재 검색 위치(index)를 positions 배열에 추가한 뒤, string.indexOf() 메소드를 통해 다음 위치를 찾습니다. 이를 반복하면 positions 배열에는 모든 검색 결과의 위치가 저장되게 됩니다.

결과로 [0, 10] 배열이 출력되는 것을 확인할 수 있습니다.

2.2. 정규 표현식을 사용하는 방법

이제는 정규 표현식을 사용하여 다중 검색을 수행하는 방법을 알아보겠습니다.

const string = "JavaScript는 JavaScript 기반으로 작성된 프로그래밍 언어입니다.";
const searchStr = /JavaScript/g;

const positions = [...string.matchAll(searchStr)].map((match) => match.index);

console.log(positions); // 결과: [0, 10]

위 코드에서는 검색할 문자열을 정규 표현식 객체로 표현한 후, string.matchAll() 메소드를 사용하여 모든 일치하는 값의 iterator를 얻습니다.

iterator를 배열로 변환한 뒤, map 함수를 사용하여 각 일치하는 값의 위치를 추출합니다. 이를 positions 배열에 저장합니다.

결과적으로 [0, 10] 배열이 출력됩니다.

2.3. ES6에서 추가된 방법

마지막으로 ES6에서 추가된 방법을 알아보겠습니다. ES6부터는 String.prototype.includes() 메소드를 사용하여 다중 검색을 수행할 수 있습니다.

const string = "JavaScript는 JavaScript 기반으로 작성된 프로그래밍 언어입니다.";
const searchStr = "JavaScript";

let index = -1;
let positions = [];

while((index = string.indexOf(searchStr, index + 1)) !== -1) {
    positions.push(index);
}

console.log(positions); // 결과: [0, 10]

위 코드에서는 반복문을 사용하여 string.indexOf() 메소드를 호출합니다. 반복문은 -1을 반환할 때까지 실행되며, 현재 검색 위치(index)를 positions 배열에 추가합니다.

결과적으로 [0, 10] 배열이 출력됩니다.

3. 결론

잘 알려진 indexOf() 메소드는 기본적으로 하나의 위치만을 반환하지만, 여러 번 등장할 수 있는 특정 문자열의 모든 위치를 찾기 위해 다양한 방법을 소개했습니다.

기본적인 반복문을 활용하는 방법부터 정규 표현식, ES6에서 추가된 includes() 메소드 등 다양한 방법을 사용할 수 있으니, 상황에 맞게 선택하여 사용하면 됩니다.