[javascript] 자바스크립트 특정 문자 찾기 (indexOf, includes, search 비교 정리)

 

 

 

안녕하세요.
오늘은 자바스크립트에서 기본으로 제공하는 특정 문자를 찾는 기능들에 대해 정리하였습니다.

indexOf, includes, search 세 기능에 대해 사용 방법

---

1. indexOf

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    var data = 'abcde';
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    // 일반 문자 keyword
    var keyword = 'b';
    // 정규식 문자 keyword
    var regKeyword = /[a-c]/g;

    // data 조회
    console.log('[indexOf] string data 일반 문자 : ' + data.indexOf(keyword));
    // data 정규식 조회
    console.log('[indexOf] string data 정규식 문자 : ' + data.indexOf(regKeyword));

    // data list 조회
    console.log('[indexOf] Array data 일반 문자 : ' + dataList.indexOf(keyword));
    // data list 정규식 조회
    console.log('[indexOf] Array data 정규식 문자 : ' + dataList.indexOf(regKeyword));

});
</script>

먼저 indexOf의 예제 소스 코드입니다. 테스트로 문자열 데이터와 배열 데이터를 세팅하였고, 테스트 데이터를 대상으로 찾을 일반 keyword 값과 정규식 keyword 값도 같이 세팅했습니다.

indexOf는 찾고자 하는 특정 문자값이 있으면 해당 문자값의 인덱스 번호를 반환하게 됩니다.

'abcde'에서 'c' 문자값의 인덱스는 2이며, 반환값은 2가 됩니다.

 

각각 데이터 유형별로 keyword 정보를 indexOf를 사용하여 값이 있는지 로그를 통해 확인해 보겠습니다.

 

* 실행 결과

indexOf를 이용해서 일반 string 문자나 배열 문자는 일반 keyword를 찾았지만 정규식 keyword는 찾을 수 없다고 결과가 나왔습니다.

일반적인 방식으로 찾는 것은 가능하지만 정규식을 이용하여 찾는 것은 불가능합니다.

	결과	검색 여부
data.indexOf(keyword)	1	가능
data.indexOf(regKeyword)	-1	불가능
dataList.indexOf(keyword)	1	가능
dataList.indexOf(regKeyword)	-1	불가능

 

그럼 다음은 includes를 이용하여 문자를 찾는 방법을 알아보겠습니다.

 

---

2. includes

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    var data = 'abcde';
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    // 일반 문자 keyword
    var keyword = 'b';
    // 정규식 문자 keyword
    var regKeyword = /[a-c]/g;

    // data 조회
    console.log('[includes] string data 일반 문자 : ' + data.includes(keyword));
    // data 정규식 조회
    console.log('[includes] string data 정규식 문자 : ' + data.includes(regKeyword));

    // data list 조회
    console.log('[includes] Array data 일반 문자 : ' + dataList.includes(keyword));
    // data list 정규식 조회
    console.log('[includes] Array data 정규식 문자 : ' + dataList.includes(regKeyword));

});
</script>

indexOf의 예제 소스 코드와 동일하게 적용을 하고 기능을 사용하는 부분만 includes로 변경을 하였습니다.

includes는 indexOf와 기능이 유사하지만 반환하는 결괏값이 다릅니다. indexOf는 검색된 문자 위치의 인덱스 번호를 반환하지만 includes는 boolean 값으로 반환을 합니다. 찾는 문자값이 있으면 true, 없으면 false로 결과가 나오게 되죠.

 

그럼 includes를 이용한 소스 코드의 실행 결과를 확인해 보겠습니다.

 

* 실행 결과

실행 결과는 indexOf와는 조금 다르게 data에 정규식 문자를 찾을 때에는 에러가 발생하였습니다. 나머지는 indexOf와 동일한 결과가 나옵니다. (반환값은 다르지만요.. ㅎㅎ)

 

includes도 indexOf처럼 테이블 형식으로 정리하였습니다.

	결과	검색 여부
data.includes(keyword)	true	가능
data.includes(regKeyword)	error	불가능
dataList.includes(keyword)	true	가능
dataList.includes(regKeyword)	false	불가능

두 번째 케이스인 data에 정규식 keyword를 찾을 때에만 에러가 발생한다는 차이가 있습니다.

 

다음은 마지막으로 search 기능에 대해 알아보도록 하겠습니다.

 

반응형

---

3. search

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {
    
    var data = 'abcde';
    var dataList = ['a', 'b', 'c', 'd', 'e'];

    // 일반 문자 keyword
    var keyword = 'b';
    // 정규식 문자 keyword
    var regKeyword = /[b-c]/g;

    // data 조회
    console.log('[search] string data 일반 문자 : ' + data.search(keyword));
    // data 정규식 조회
    console.log('[search] string data 정규식 문자 : ' + data.search(regKeyword));
    // data list 조회
    console.log('[search] Array data 일반 문자 : ' + dataList.search(keyword));    
    // data list 정규식 조회
    console.log('[search] Array data 정규식 문자 : ' + dataList.search(regKeyword));
});
</script>

search도 indexOf의 예제 소스 코드와 동일하게 적용을 하고 기능을 사용하는 부분만 includes로 변경을 하였습니다.

search의 기능도 indexOf와 많이 유사합니다. 하지만 크게 다른 점이 있는데 indexOf와 includes는 정규식 문자를 찾을 수 없거나 에러가 발생을 하였지만 search는 정규식 문자로 조회가 가능합니다. 그리고 search는 array를 대상으로 문자를 찾으면 에러가 발생합니다.

 

* 실행 결과

실행 결과는 마찬가지로 string 문자 기준으로 검색했을 경우와 정규식을 기준으로 검색했을 경우에만 정상적으로 찾을 수 있었습니다.

	결과	검색 여부
data.search(keyword)	1	가능
data.search(regKeyword)	1	가능
dataList.search(keyword)	error	불가능
dataList.search(regKeyword)	error	불가능

 

---

마무리

	string 검색	array 검색	정규식 검색	default return
indexOf	가능	가능	불가능	-1
includes	가능	가능	불가능	0
search	가능	불가능	가능	false

세 종류의 기능을 비교 정리하자면

    1. 일반적인 string 검색을 할 경우에는 세 가지 기능을 사용했을 때 크게 차이가 없다.

    2. boolean 값의 반환이 필요한 경우는 includes를 이용하여 검색

    3. 정규식 특정 문자 검색이 필요한 경우는 search를 이용하여 검색

 

 

개인적으로는 보통 indexOf 기능을 가장 많이 사용을 해왔고, 정규식을 이용한 validation 체크가 필요한 상황에서는 search를 많이 사용해 왔습니다. 상황에 맞춰 사용하면 좋을 것 같습니다!

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.