본문 바로가기
Reference/JAVASCRIPT

indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다.

by @webstoryboy 2022. 10. 28.
indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다.
Reference/Javascript

indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다.

by @webs 2022. 7. 4.

indexOf()

indexOf() 메서드는 문자열에서 특정 문자의 위치를 찾습니다. 문자열 내에 문자들은 왼쪽부터 순번이 매겨지고, 결과 값으로 순번이 반환됩니다. 만약 찾는 문자가 없다면, -1 값을 반환합니다.


특징 설명
유형(type) String.prototype.indexOf()
버전(version) ES1
결과값(return) 숫자(mumber)
사용성 ★★★☆☆

문법(Syntax)

"문자열".indexOf(검색값)
"문자열".indexOf(검색값, 위치값)

"javascript reference".indexOf('javascript') //0
"javascript reference".indexOf('javascripts') //-1
"javascript reference".indexOf('j') //0
"javascript reference".indexOf('a') //1
"javascript reference".indexOf('jv') //-1
"javascript reference".indexOf('reference') //11
"javascript reference".indexOf('r') //6
"javascript reference".indexOf('javascript', 0) //0
"javascript reference".indexOf('javascript', 1) //-1
"javascript reference".indexOf('reference', 0) //11
"javascript reference".indexOf('reference', 11) //11
"javascript reference".indexOf('reference', 12) //-1
"javascript reference".indexOf('r', 7) //11
"javascript reference".indexOf('r', 12) //15
  • 문자열(string) : 문자열을 설정합니다.
  • 검색값(searchValue) : 검색할 문자열을 설정합니다.
  • 위치값(position) : 문자열 검색 시작 위치값을 설정합니다.

정의(Definition)

  • indexOf() 메서드는 문자열에서 원하는 값을 찾아 인덱스 값을 반환합니다.
  • indexOf() 메서드는 일치하는 값이 없으면 -1을 반환합니다.
  • indexOf() 메서드는 대소문자를 구분합니다.

문자열 검색과 관련된 메서드

  • indexOf() 메서드는 문자열을 검색하고 위치값(숫자)을 반환합니다.
  • lastIndexOf() 메서드는 문자열을 역순으로 검색하고 위치값(숫자)을 반환합니다.
  • search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)을 반환합니다.
  • match() 메서드는 문자열(정규식)을 검색하고 문자값(배열)을 반환합니다.
  • charAt() 메서드는 지정한 숫자(index)의 단일 문자 값을 반환합니다.
  • charCodeAt() 메서드는 지정한 숫자(index)의 유니코드 값을 반환합니다.
  • includes() 메서드는 문자열 포함 여부를 검색하여 불린(true, false)을 반환합니다.
  • startsWith() 메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다.
  • endsWith() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)을 반환합니다.

문자열 변경과 관련된 메서드

  • slice() 메서드는 문자열에서 원하는 값을 추출하여 새로운 문자열을 반환합니다.
  • substring() 메서드는 문자열에서 원하는 값을 추출하여 새로운 문자열을 반환합니다.
  • substr() 메서드는 문자열에서 원하는 값을 추출하여 새로운 문자열을 반환합니다.
  • split() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다.
  • replace() 메서드는 문자열에서 특정 문자열을 교체하여 새로은 문자열을 반환합니다.
  • replaceAll() 메서드는 문자열에서 모든 특정 문자열을 교체하여 새로은 문자열을 반환합니다.
  • concat() 메서드는 둘 이상의 문자열을 결합하여 새로운 문자열을 반환합니다.
  • repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다.
  • padStart() 메서드는 주어진 길이에 맞게 앞 문자열을 채우고, 새로운 문자열을 반환합니다.
  • padEnd() 메서드는 주어진 길이에 맞게 뒤 문자열을 채우고, 새로운 문자열을 반환합니다.
  • trim() 메서드는 문자열의 앞뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • trimStart() 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다.
  • trimEnd() 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다.
  • toUpperCase() 메서드는 문자열을 대문자로 설정하고, 새로운 문자열을 반환합니다.
  • toLowerCase() 메서드는 문자열을 소문자로 설정하고, 새로운 문자열을 반환합니다.
  • toString() 메서드는 데이터를 문자열로 변환하고, 새로운 문자열을 반환합니다.

예제1(Sample)

문자열을 검색하고 위치값을 반환하는 예제입니다.

javascript

클릭하면 여기에 정보가 나옵니다.

a b c d e f g h i
HTML
CSS
SCRIPT
<div class="charAt-box">
    <span>javascript</span>
    <p class="alert">클릭하면 여기에 정보가 나옵니다.</p>
</div>
#sample1 .charAt-box {
    text-align: center;
}
#sample1 .charAt-box .alert {
    padding-top: 10px;
}
#sample1 .charAt-box span {
    border: 1px solid #e6e6e6;
    padding: 10px 20px;
    display: inline-block;
    margin-bottom: 10px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    border-radius: 40px;
}
#sample1 .charAt-box em {
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    color: #fff;
    padding: 10px;
}
const text = document.querySelector(".indexof-box .text").innerText;
const btnAll = document.querySelectorAll(".sampleBtn a");
const btnAlert = document.querySelector(".indexof-box .alert");

btnAll.forEach(btn => {
    btn.addEventListener("click", (e) => {
        e.preventDefault();
        const char = btn.innerText.trim();
        const result = text.indexOf(char);
        
        if(result > 0){
            btnAlert.innerHTML = `클릭한 ${char} 글자는 <em>${result}</em> 번째 위치에 있습니다.`;
        } else {
            btnAlert.innerHTML = `클릭한 ${char} 글자는 존재하지 않습니다.`;
        }
    });
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
indexOf()

참고(Reference)


댓글