목차
indexOf() 예제 - 일치 문자열 처음 위치 반환 indexOf() 정의 indexOf() 구문 indexOf() 예제 - 새 도메인으로 도메인 포워딩 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.
모든 브라우저 지원
3. cf.
charAt() : 문자열 내 각 색인번호에 해당하는 문자 반환.
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>
