본문 바로가기

Javascript/활용팁&실전예제

자바스크립트 문자열에 검색어가 있는지 찾기. indexOf()와 contains() 메서드 활용.

반응형

자바스크립트에는 문자열에서 검색어 문자열이 있는 첫 번째 인덱스 위치를 반환해주는 메서드가 있습니다.

 

let string = '아주 여러 해 전 바닷가 어느 왕국에 당신이 아는지도 모를 한 소녀가 살았지.', search = '왕국';
console.log(string.indexOf(search, 0));

 

문자열 객체의 메서드인 indexOf() 메서드는 첫 번째 파라미터로 검색 문자열을, 두 번째 파라미터로 시작 위치 인덱스를 넘기며, 검색 결과 찾는 문자열이 있으면 문자열이 처음 나오는 위치의 시작 인덱스를 반환합니다.

찾는 문자열이 없으면 -1을 반환합니다.

 

불리언으로 문자열이 있는지만 확인하고 싶으면 다음과 같이 조건식으로 비교하면 됩니다.

 

console.log(string.indexOf(substring) !== -1);

 

HTML 요소의 클래스 리스트에 특정 클래스가 있는지를 확인해주는 contains() 메서드처럼 검색어가 있으면 불리언 true를 반환해주는 메서드를 문자열 객체에 추가하면 조금 더 세련되게 검색어가 있는지 여부를 알 수 있습니다.

 

if (!String.prototype.contains) {
    String.prototype.contains = function(search, start) {
        'use strict';
  
        //시작위치가 숫자인지 체크
        if (typeof start !== 'number') {
            start = 0;
        }
        //시작위치+검색어길이가 문자열 끝보다 작은지 체크
        if (start + search.length > this.length) {
            return false;
        } else {
            //indexOf() 메서드로 검색어 위치 인덱스 확인
            return this.indexOf(search, start) !== -1;
        }
    };
}

 

기능적으로는 크게 새로울 것은 없지만 검색어가 있는지 확인할 때 다음과 같이 조금 더 알아보기 쉽고 간결하게 표현할 수 있습니다.

 

console.log(string.contains(substring));

 

 

 

반응형

닫기