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

028_자바스크립트에서 문자열 검색하기 (인덱스 검색)

[적용]

• 원하는 문자열의 위치를 확인하고 싶을 때

---

[문법]

메소드	의미	반환
대상문자열.indexOf(검색대상문자열, [검색시작인덱스*])	문자열 시작 인덱스	숫자
대상문자열.lastIndexOf(검색대상문자열, [검색시작인덱스*])	문자열 종료 인덱스	숫자
대상문자열.search(정규표현)		숫자

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

---

[예시1]

문자열 내에서 특정 문자열을 검색할때...

indexOf()는 지정한 문자열의 인덱스 위치를 반환하며, 값은 0부터 시작한다.

문자열의 첫 번째 문자는 위치가 0이며, 다섯 번째 문자의 경우 인덱스의 값은 4이다.

문자열을 찾을 수 없는 경우에는 -1이 반환된다.

영문은 대소문자를 구별하여 검색한다.

JavaScript

const myString = 'JavaScript를 배우자';

// 지정 문자열이 존재할 때
const a1 = myString.indexOf('JavaScript');
console.log(a1);  // 결과: 0

const a2 = myString.indexOf('배우자');
console.log(a2);  // 결과: 12

const a3 = myString.lastIndexOf('a');
console.log(a3);  // 결과: 3

// 지정 문자열이 존재하지 않을 때
const b1 = myString.indexOf('HTML');
console.log(b1);  // 결과: -1

const b2 = myString.indexOf('j');
console.log(b2);  // 결과: -1 (대소문자를 구별)

---

[예시2]

검색 시작 인덱스를 지정하면 지정한 위치에서부터 검색을 시작한다.

생략하면 대상 문자열의 처음부터 검색을 시작한다.

JavaScript

const myString = 'JavaScript를 배우자';
const c1 = myString.indexOf('JavaScript', 4);
console.log(c1);  // 결과: -1

---

[예시3]

샘플 코드를 통해 인덱스 검색의 결과값을 확인해보자

HTML

<main>
    <h1>'JavaScript를 배우자'의 인덱스</h1>
    <table>
        <tr><th>indexOf('JavaScript')</th><td class="result1"></td></tr>
        <tr><th>indexOf('배우자')</th>    <td class="result2"></td></tr>        
        .
        .
        .
[생략]

JavaScript

const targetString = 'JavaScript를 배우자';

document.querySelector('.result1').innerHTML = targetString.indexOf('JavaScript');
document.querySelector('.result1').innerHTML = targetString.indexOf('배우자');
.
.
(생략)

---

[Appendix]

정규표현의 검색

조금 더 체계화된 검색은 정규 표현을 사용한다.

search()는 정규표현과 일치하는 문자의 인덱스 값을 반환한다.

정규 표현을 사용하여 문자열을 검색하는 코드를 확인해 보자.

 

const myString = 'JavaScript를 배우자';

const s1 = myString.search(/JavaScript/);
console.log(s1);  // 결과: 0

const s2 = myString.search(/HTML/);
console.log(s2);  // 결과: -1

---

[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
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김