[String] JS - indexOf() 메서드(문자열) ★ - 처음일치문자열위치찾기 (= 문자열포함검사 = 인덱스어브메서드)

목차

1. indexOf() 예제 - 일치 문자열 처음 위치 반환
2. indexOf() 정의
3. indexOf() 구문
4. indexOf() 예제 - 새 도메인으로 도메인 포워딩
5. indexOf() 예제 - 메뉴 현재위치 활성화 표시

indexOf() 예제 - 일치 문자열 처음 위치 반환

<button onclick="hz()">위치 확인</button>

<p id="po"></p>

<script>

function hz() {

    var str = "홈짱닷컴 Homzzang.com";

    var n = str.indexOf("Homzzang");

    document.getElementById("po").innerHTML = n;

}

</script>

결과값: 5

indexOf() 정의

 

일치 문자열 처음 위치 반환.

※  대소문자 구별.

 

---

1.. 

일치 문자열 없을 시 -1 반환 이용해, 메뉴 현재 위치 표시 용도 가능. (즉, 메뉴 문자열이 URL에 있다면 적어도 -1보다 크다는 점 이용.)

 

2. cf.

• charAt() 메서드 - 문자열 내 각 색인번호에 해당하는 문자 반환. 

 

3.

모든 브라우저 지원

 

indexOf() 구문

 

string.indexOf(searchvalue, start)

 

---

[매개변수]

 

searchvalue

필수. 검색대상 문자열에서 찾을 문자열. 

 

start

선택. 검색시작위치. (기본값: 0)

※ 순서는 0부터 시작.  (즉, 0 , 1 , 2 , ..........)

---

[반환값]

 

• 일치 문자열 있으면, 해당 문자열 시작 위치 반환.
• 일치 문자열 없으면, -1 반환.

 

indexOf() 예제 - 새 도메인으로 도메인 포워딩

 

<script>

oldUrl = "homzzang.cafe24.com";

newUrl = "homzzang.com";

if (location.href.indexOf(oldUrl) > -1) location.href = location.href.replace(oldUrl, newUrl);

</script>

 

indexOf() 예제 - 메뉴 현재위치 활성화 표시

<div id="mysubmenu">

  <!-- 내용 -->

</div>

 

<script>

  var submenuLinks = document.querySelectorAll('#mysubmenu a');

  submenuLinks.forEach(function(link) {

    link.addEventListener('click', function() {

      submenuLinks.forEach(function(item) {

        item.parentNode.classList.remove('active');

      });

      this.parentNode.classList.add('active');

    });

    if (link.getAttribute('href').indexOf(location.pathname) > -1) {

      link.parentNode.classList.add('active');

    }

  });

</script>

---

PS. jQuery 경우

 

<div id="mysubmenu">

~

</div>

 

<script>

$('#mysubmenu a').each(function() {    

    let _href = $(this).attr('href');

    

    if (_href.indexOf(location.pathname) > -1)

        $(this).parent().addClass('active');

    else

        $(this).parent().removeClass('active');

});

</script>