자바스크립트 문자열 indexOf() 함수 – 특정 문자열의 처음 등장한 위치 찾기

`String.prototype.indexOf()` 사용법

문자열 indexOf() 함수는
문자열에서 인수로 전달된 문자열를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환하는 함수입니다.
인수로 전달된 문자열를 찾을 수 없다면 -1을 반환합니다.

이 함수는 대소문자를 구분합니다.

indexOf() 함수는 문자열에서 문자의 위치를 찾거나, 존재하는지 확인할 때 유용합니다.

JavaScript

const greeting = "환영합니다. 코딩에브리바디입니다.";

/*
 * 주의하세요!
 * 문자열에서 인덱스는 0부터 시작합니다.
 * 첫 번째 문자열의 인덱스는 0이고, 두 번째 문자열의 인덱스는 1입니다.
*/

// 문자열 greeting에서 문자열 "환영합니다."를 찾아
// 첫 번째로 검색된(등장한) 문자열("환")의 인덱스를 반환합니다.
const hello = greeting.indexOf("환영합니다.");
console.log(hello); // 출력: 0;

// 문자열 greeting에서 인수로 전달된 문자열 "반갑습니다."를 찾을 수 없으므로
// -1을 반환합니다.
const niceTomeetYou = greeting.indexOf("반갑습니다.");
console.log(niceTomeetYou); // 출력: -1;

const coding = greeting.indexOf("코딩", 5);
// 두 번째 인수는 검색을 시작할 인덱스입니다.
// 이 인수는 옵션으로, 생략하면 처음(0)부터 검색합니다.
// 인덱스는 여전히 맨 왼쪽부터 오른쪽으로 카운트됩니다.
// 인수의 값이 5이므로, 6번째부터 검색했을 때 문자 "코딩"은 검색이 되고,
// 맨 왼쪽(인덱스 0)부터 검색된 문자열 "코"의 인덱스는 7입니다.

console.log(coding); // 출력: 7;

배열에서는 Array.prototype.indexOf()가 같은 역할을 합니다.

문자열에서 특정 문자열이 마지막에 등장한 위치를 찾으려면 lastIndexOf() 함수를 사용하세요.

indexOf() 함수의 형식은 다음과 같습니다.

구문

str은 indexOf() 함수를 적용할 대상 문자열입니다.

매개변수

문자열 indexOf() 함수의 매개변수 설명
`searchValue`	필수. 찾을 문자열입니다. 대소문자를 구분합니다. 아무 값도 주어지지 않으면 문자열 `"undefined"`를 찾으려는 문자열로 사용합니다.
`fromIndex`	옵션. 검색을 시작할 `0` 기반의 인덱스입니다. 생략하면 기본값으로 `0`이 사용됩니다. 음수 값을 사용할 수 있으며, 이 경우 배열의 끝에서부터 역으로 카운트됩니다. 그러나, 여전히 왼쪽에서 오른쪽으로 검색합니다. `indexOf()` 함수를 적용할 대상 문자열의 길이(`str.length`)보다 크거나 같으면 `-1`을 반환합니다.

반환 값

indexOf() 함수를 적용할 대상 문자열에서 인수로 전달된 문자열를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
인수로 전달된 문자열를 찾을 수 없다면 -1을 반환합니다.

매개변수와 반환 값 예시

JavaScript

/*
 * 인수로 전달된 문자열이 indexOf() 함수를 적용할 문자열에서 중복으로 있다면,
 * 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
*/
const str = "색상은 빨강, 파랑, 파랑, 노랑입니다.";

// 문자열 str에서 문자열 "파"를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
const val_1 = str.indexOf("파");

// 문자열 str에서 찾을 문자열 "파"는 두 개가 있습니다.
// 인덱스 8과 12에 있습니다.
// 하지만, 첫 번째로 검색된 찾을 문자열의 인덱스인 8을 반환합니다.
console.log(val_1); // 출력: 8;

// 문자열 str에서 인수로 전달된 문자열 "녹"을 찾을 수 없으므로 -1일 반환합니다.
const val_2 = str.indexOf("녹");
console.log(val_2); // 출력: -1;

const val_3 = str.indexOf("은", 1);
// 두 번째 인수는 검색을 시작할 인덱스입니다.
// 이 인수는 옵션으로, 생략하면 처음(0)부터 검색합니다.
// 인수의 값이 1이므로, 두 번째 문자열부터 검색했을 때 찾을 문자열 "은"은 검색이 되고,
// 맨 왼쪽(인덱스 0)부터 검색된 문자열 "은"의 인덱스는 2입니다.

console.log(val_3); // 출력: 2;

//////////////////////////////////////////
const undefinedStr = "값을 할당하지 않은 변수의 값을 undefined라 합니다.";
const val_4 = undefinedStr.indexOf();

// 첫 번째 매개변수에 아무 값도 주어지지 않으면
// 문자열 "undefined"를 찾으려는 문자열로 사용합니다.
// "undefined"의 인덱스인 18을 반환합니다.
console.log(val_4); // 출력: 18;

주의할 점

indexOf() 함수로 문자열을 검색할 때에는 대소문자를 구분합니다.

JavaScript

const redString = "red";
const searchRed = redString.indexOf("Red");

// 대문자 "R"과 소문자 "r"을 구분합니다.
console.log(searchRed); // 출력: -1;

이 함수의 관련 함수를 참조하세요.

다양한 활용 예제

indexOf() 함수에 관련된 다양한 활용 예제입니다.

부분 문자열의 존재 여부 확인

indexOf() 함수를 사용하여 문자열 내에서 특정 부분 문자열이 존재하는지 확인할 수 있습니다. 반환값이 -1이 아닌 경우, 부분 문자열이 존재하는 것입니다.

JavaScript

const str = "Hello, world!";

if (str.indexOf("world") !== -1) {
    console.log("부분 문자열이 존재합니다.");
} else {
    console.log("부분 문자열이 존재하지 않습니다.");
}

// 출력: "부분 문자열이 존재합니다."

부분 문자열의 존재 여부 확인하는 함수 중에서는 includes() 함수가 있습니다.
ECMAScript 6(ES6)에서 도입된 includes() 함수는 문자열에서 주어진 문자열이 포함되어 있으면 true를 그렇지 않으면 false를 반환하는 함수입니다. 이 함수는 2015년에 공식적으로 발표되었으며, 인터넷 익스플로러(Internet Explorer) 브라우저에서 지원하지 않는다는 불편함이 있습니다. 인터넷 익스플로러 호환성을 고려할 필요가 없다면 부분 문자열의 존재 여부 확인은 indexOf() 함수 보다는 includes() 함수가 더 직관적이고 활용하기 편리합니다.

대소문자 구분 없는 문자열 검색

indexOf() 함수는 검색하는 문자열의 대소문자를 구분하지만, toLowerCase() 함수를 사용하여 대소문자를 무시하고 문자열 내에서 부분 문자열을 검색할 수 있습니다.

toLowerCase() 함수는
문자열 객체의 메서드 중 하나로, 문자열을 모두 소문자로 변환하는 함수입니다.

JavaScript

const str = "Hello, World!";
const searchStr = "world";

if (str.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1) {
    console.log("부분 문자열이 대소문자와 관계없이 존재합니다.");
}

// 출력: "부분 문자열이 대소문자와 관계없이 존재합니다."

특정 문자열의 반복 횟수

JavaScript

// 주어진 문자열
const str = "Hello, world! Hello, universe!";

// 찾고자 하는 부분 문자열
const searchStr = "Hello";

let count = 0;

// 문자열에서 초기 발생 위치를 찾음
let idx = str.indexOf(searchStr);

// 발생 위치를 찾을 때까지 반복
while (idx !== -1) {
    // 발생 횟수 추가
    count++;

    // 다음 발생 위치를 찾기 위해, 이전 발생 위치 이후에서 다시 검색
    idx = str.indexOf(searchStr, idx + 1);
}

// 찾는 문자열의 반복 횟수 출력
console.log("찾는 문자열의 반복 횟수:", count);
// 출력: 찾는 문자열의 반복 횟수: 2

코드 부연설명
while 문은 조건식이 참(true)인 동안 코드 블록을 반복 실행하는 반복문입니다.

위 코드에서는 indexOf() 함수를 사용하여 "Hello" 문자열의 첫 번째 발생 위치를 찾은 후, 이 위치 이후에서 다시 indexOf()를 호출하여 다음 발생 위치를 찾습니다. 이러한 과정을 반복하고 발생 횟수(count)를 하나씩 추가하고 그 값을 확인하여 "Hello" 문자열이 나타나는 횟수를 계산합니다.