const info = "JavaScript는 프로그래밍 언어이다.";info라는 변수에 "프로그래밍" 이라는 단어가 포함되어 있는지 알고 싶습니다.
indexOf 메서드는 특정 문자열이 포함되어있는지 확인하고, 만약 있다면 몇 번 째 순서에 해당 문자열이 있는지 알려 줍니다.
string.indexOf(searchvalue, position)
searchvalue : 필수 입력값, 찾을 문자열
position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치
그리고 해당 문자열이 없다면 -1을 반환합니다.
이렇게 특정 문자열을 찾는 함수가 왜 필요 할까요?
일례로, 댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있습니다.
차단할 단어 모음이 존재한다고 하고, 사용자가 댓글을 입력한 뒤 "댓글 달기"를 누를 때, 차단할 단어 모음 중에 하나라도 매치되면 댓글을 달지 못하도록 막을 수 있습니다.
const info = "JavaScript는 프로래밍 언어이다."; // "JavaScript는 프로래밍 언어이다."
const firstChar = info.indexOf("프로래밍");
console.log(info, firstChar); // 12
if (firstChar !== -1) {
info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);
}
console.log(info);위는 "프로래밍" 이라는 오타를 "프로그래밍" 이라고 바꾸어 주는 코드입니다.
코드를 한 줄 한 줄 설명하면,
1. info 문구에서 "프로래밍"이 시작되는 index 는 12입니다.
2. if (firstChar !== -1)
- firstChar 이 -1이 아니면
- 즉, "프로래밍"이라는 문구가 없지 않다면
- 즉, "프로래밍"이라는 문구가 있다면
- "프로래밍" 문구는 12번째에서 시작하므로
firstChar는 12 입니다. 따라서 조건문은true가 되고,if문을 실행합니다.
info.slice(0, firstChar)
slice메서드는 이름 그대로, 텍스트를 잘라주는 함수입니다.- 그 구조는 다음과 같습니다.
slice(잘리는 시작위치, 잘리는 끝위치)- 잘릴 시작위치는 0입니다. 잘릴 끝위치는
firstChar로 12 입니다. - 그래서
slice메서드는info문구의 0부터 11번째 까지 잘라서 반환합니다. - 잘리는 끝위치의 문구는 반환시 포함되지 않습니다.
- 따라서, 12번째의 문자는 포함하지 않으며, 바로 그 직전에서 끊어줍니다.
console.log(info.slice(0, firstChar));info.slice(firstChar+4, info.length);
- 잘릴 시작 위치는 16 입니다. (
firstChar+ 4 = 12 + 4 = 16) - 잘릴 끝 위치는 22 입니다. (
info.length= 22) info의 16번째 문자인 "언" 부터 22번째 문자 이전까지 자르게 됩니다.- 22번째는 문자가 존재하지 않기 때문에, 그 직전에 끊으니 "."까지 포함하는 문자열로 잘리게 됩니다.
console.log(firstChar+4, info.length);position 값을 입력한 경우
const str = "abab";
document.writeln(str.indexOf('ab')); // 0
document.writeln(str.indexOf('ab', 1)); // 2<position 값이 없을 경우>
indexOf 함수의 두번째 파라미터인 position값이 입력되지 않으면, position의 값은 0으로 처리됩니다.
위 예제에서는 'abab' 문자열의 0번째 index부터 'ab' 문자열을 찾고, 0번째 index에서 문자열 'ab'를 발견하였으므로, 0을 리턴하였습니다.
<position 값을 입력한 경우>
position 값을 '1' 로 입력하였습니다.
위 예제에서는 'abab' 문자열의 1번째 index부터 'ab' 문자열을 검색하므로,
index 0에 있는 'ab'는 무시합니다.
출처 : wecode
