[JavaScript] 문자열 검색과 비교

소개

JavaScript에서 문자열을 다루는 다양한 메서드들, 특히 문자열 검색과 비교에 사용되는 메서드들을 자세히 알아보고, 각 메서드의 사용법과 차이점을 살펴보겠습니다.

기본 문자열 검색 메서드

1. indexOf

문자열 내에서 특정 문자열의 첫 번째 등장 위치를 찾습니다.

const text = "Hello, World!";

console.log(text.indexOf("World"));     // 7
console.log(text.indexOf("world"));     // -1 (대소문자 구분)
console.log(text.indexOf("o"));         // 4
console.log(text.indexOf("o", 5));      // 7 (시작 위치 지정)

// 실전 활용
const hasWorld = text.indexOf("World") !== -1;  // true

2. includes

문자열이 포함되어 있는지 여부를 boolean으로 반환합니다.

const text = "Hello, World!";

console.log(text.includes("World"));     // true
console.log(text.includes("world"));     // false
console.log(text.includes("o", 5));      // true (시작 위치 지정)

// 실전 활용
const isValidEmail = email.includes("@");  // 간단한 이메일 체크

3. startsWith

문자열이 특정 문자열로 시작하는지 확인합니다.

const filename = "image.jpg";

console.log(filename.startsWith("image"));  // true
console.log(filename.startsWith("img"));    // false
console.log(filename.startsWith("age", 2)); // true (시작 위치 지정)

// 실전 활용
const isImageFile = filename.startsWith("image.");

4. endsWith

문자열이 특정 문자열로 끝나는지 확인합니다.

const filename = "document.pdf";

console.log(filename.endsWith(".pdf"));     // true
console.log(filename.endsWith("doc"));      // false
console.log(filename.endsWith("ment", 8));  // true (길이 제한)

// 실전 활용
const isPdfFile = filename.endsWith(".pdf");

 

5. lastIndexOf

문자열 내에서 특정 문자열의 마지막 등장 위치를 찾습니다.

const text = "Hello, Hello, World!";

console.log(text.lastIndexOf("Hello"));     // 7
console.log(text.lastIndexOf("o"));         // 13
console.log(text.lastIndexOf("o", 5));      // 4 (뒤에서부터 검색)

6. search

정규표현식을 사용한 검색이 가능합니다.

const text = "Hello, World! 123";

console.log(text.search(/\d+/));        // 13 (숫자 위치)
console.log(text.search(/[A-Z]/));      // 0 (대문자 위치)

// 실전 활용
const hasNumber = text.search(/\d/) !== -1;

7. match

정규표현식과 매칭되는 모든 결과를 배열로 반환합니다.

const text = "Hello 123 World 456";

console.log(text.match(/\d+/g));        // ["123", "456"]
console.log(text.match(/[A-Z]\w+/g));   // ["Hello", "World"]

// 실전 활용
const numbers = text.match(/\d+/g)?.map(Number) || [];

8. matchAll

정규표현식과 매칭되는 모든 결과를 반복자로 반환합니다.

const text = "cat, bat, sat, fat";
const regex = /[a-zA-Z]at/g;

for (const match of text.matchAll(regex)) {
    console.log(match[0]);  // "cat", "bat", "sat", "fat"
}

실전 활용 예제

1. 이메일 유효성 검사

function validateEmail(email) {
    return email.includes('@') && 
           email.includes('.') && 
           !email.startsWith('@') && 
           !email.endsWith('.');
}

// 더 정확한 검증
function validateEmailRegex(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

2. 파일 확장자 확인

function getFileType(filename) {
    const imageExts = ['.jpg', '.png', '.gif'];
    const documentExts = ['.pdf', '.doc', '.txt'];

    if (imageExts.some(ext => filename.endsWith(ext))) {
        return 'image';
    }

    if (documentExts.some(ext => filename.endsWith(ext))) {
        return 'document';
    }

    return 'unknown';
}

3. URL 파싱

function parseUrl(url) {
    return {
        protocol: url.startsWith('https') ? 'https' : 'http',
        hasWww: url.includes('www'),
        domain: url.match(/^(?:https?:\/\/)?(?:www\.)?([^\/]+)/i)?.[1],
    };
}

성능 고려사항

메서드별 성능 비교

const text = "Hello, World!";
const searchTerm = "World";

// 1. indexOf (가장 빠름)
console.time('indexOf');
text.indexOf(searchTerm) !== -1;
console.timeEnd('indexOf');

// 2. includes
console.time('includes');
text.includes(searchTerm);
console.timeEnd('includes');

// 3. 정규표현식
console.time('regex');
new RegExp(searchTerm).test(text);
console.timeEnd('regex');