[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

029_자바스크립트에서 문자열 검색하기 (부분 검색)

[적용]

• 지정 문자열의 포함 여부를 확인하고 싶을 떄
• 입력폼의 부적절한 문자를 체크하고 싶을 떄

---

[문법]

메소드	의미	반환
대상문자열.includes(검색대상문자열, [검색시작인덱스]*)	문자열 포함 여부 확인	진리값
대상문자열.startsWith(검색대상문자열, [검색시작인덱스]*)	문자열 시작 문자 확인	진리값
대상문자열.endsWith(검색대상문자열, [검색시작인덱스]*)	문자열 종료 문자 확인	진리값

* 검색 시작 인덱스는 생략 가능

---

[내용]

includes(), startsWith(), endsWith()를 사용하면 지정 문자열의 포함 여부를 확인할 수 있다.

includes()는 위치에 상관없이 지정 문자열이 포함되어 있다면 true를 반환한다.

startsWith()는 시작 문자열이 인수와 같은지를 확인하고 endsWith()는 종료 문자열을 확인한다.

 

JavaScript

const myString = 'JavaScript를 배우자';

const a1 = 'JavaScript를 배우자'.includes('JavaScript');
conseol.log(a1);  // 결과: true

const a2 = 'JavaScript를 배우자'.startsWith('배우자');
conseol.log(a2);  // 결과: false

const a3 = 'JavaScript를 배우자'.endsWith('배우자');
conseol.log(a3);  // 결과: true

 

indexOf()는 지정 문자열의 인덱스를 반환하고 includes()는 지정 문자열의 포함 여부를 반환한다.

샘플 코드를 통해 지정 문자열의 포함 여부 결과값을 확인해보자

HTML                                                                                                                                                              index.html

<main class="main">
    <h1>'JavaScript를 배우자'에서 문자열의 포함 여부 체크</h1>
    <table>
    	<tr><th>includes('JavaScript')</th> <td class="result1"></td></tr>
        <tr><th>includes('배우자')</th>     <td class="result2"></td></tr>
 .
 .
 [생략]

JavaScript                                                                                                                                                          main.js

const targetString = 'JavaScript를 배우자';

document.querySelector('.result1').innerHTML = targetString.includes('JavaScript');  // true
document.querySelector('.result2').innerHTML = targetString.includes('배우자');  // true
document.querySelector('.result3').innerHTML = targetString.includes('배우자', 12);  // true
document.querySelector('.result4').innerHTML = targetString.includes('HTML');  // false
document.querySelector('.result5').innerHTML = targetString.startsWith('배우자');  // false
document.querySelector('.result6').innerHTML = targetString.endsWith('배우자');  // true

---

[JavaScript] 자바스크립트에서 문자열 다루기

[JavaScript] 자바스크립트에서 문자열 다루기

---

[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()

[JavaScript] 자바스크립트 문자열의 길이 확인하기

---

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

---

[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)

[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기

---

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

---

[JavaScript] 자바스크립트 지정 문자열 변환하기

[JavaScript] 자바스크립트 지정 문자열 변환하기

---

[JavaScript] 자바스크립트 문자열 나누기

[JavaScript] 자바스크립트 문자열 나누기

---

[JavaScript] 자바스크립트 문자열 합치기

[JavaScript] 자바스크립트 문자열 합치기

---

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

---

[JavaScript] 자바스크립트 문자열과 식 함께 다루기

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

---

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

 

---

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김