JavaScript를 다루다 보면 문자열 안에 특정 문자가 몇 번 등장하는지 확인해야 하는 경우가 자주 있습니다. 예를 들어 사용자 입력을 검증하거나 텍스트 데이터를 분석할 때 매우 유용합니다. 이번 글에서는 반복문을 활용한 기본적인 방법과 더 간결한 대안까지 함께 살펴보겠습니다.
1. 반복문을 활용한 기본 예제
아래 예제는 문자열과 찾고 싶은 문자를 입력하면, 해당 문자가 몇 번 나타나는지 계산하여 화면에 결과를 표시합니다.
<!DOCTYPE html>
<html>
<body>
<script>
function displayCount() {
setTimeout(function() {
var str = document.getElementById('str1').value;
var letter = document.getElementById('letter1').value;
letter = letter[letter.length-1];
var lCount;
for (var i = lCount = 0; i < str.length; lCount += (str[i++] == letter));
document.querySelector('p').innerText = lCount;
return lCount;
}, 50);
}
</script>
Enter String: <input type="text" id="str1"><br><br>
Enter Letter: <input onkeypress="displayCount()" type="text" id="letter1"><br><br>
<button onclick="displayCount()">Click for Result</button><br><br>
result= <p></p>
</body>
</html>
코드 동작 원리
- 입력 값 가져오기:
document.getElementById()를 통해 문자열 입력값과 찾고자 하는 문자를 읽어옵니다. - 문자 추출:
letter[letter.length-1]은 입력된 값 중 마지막 한 글자만 사용하도록 합니다. - 횟수 계산:
for루프가 문자열을 처음부터 끝까지 순회하면서, 각 위치의 문자가 찾는 문자와 일치할 때마다 카운트(lCount)를 1씩 증가시킵니다. - 결과 출력: 최종 개수를
<p>요소에 표시하고 함수에서 반환합니다.
2. split() 메서드를 활용한 간단한 방법
반복문 없이 더 짧은 코드로 같은 결과를 얻을 수도 있습니다. split()으로 문자열을 대상 문자 기준으로 잘라낸 뒤, 생성된 조각의 개수에서 1을 빼면 발생 횟수가 됩니다.
const str = "hello world";
const count = str.split("o").length - 1;
console.log(count); // 2
3. 정규표현식과 match() 활용하기
match()와 정규표현식을 조합하면 대소문자 구분 여부까지 손쉽게 제어할 수 있습니다.
const str = "Hello World"; const count = (str.match(/l/g) || []).length; console.log(count); // 3
정규표현식 끝에 i 플래그를 추가하면(/l/gi) 대소문자를 구분하지 않고 셀 수 있습니다.
마무리
문자열에서 특정 문자의 발생 횟수를 세는 방법은 반복문, split(), match() 등 상황에 맞게 다양하게 선택할 수 있습니다. 간단한 작업에는 split() 방식이 가독성 면에서 유리하고, 복잡한 패턴 매칭이 필요하다면 정규표현식을 활용하는 것이 좋습니다.