바닐라 자바스크립트로 웹페이지의 모든 단어 수를 세는 방법

바닐라 자바스크립트(Vanilla JavaScript)만으로 웹사이트의 특정 영역에 포함된 모든 단어를 손쉽게 세는 방법을 알아보세요.

블로그 게시물이나 페이지의 전체 단어 수를 파악해야 할 때가 종종 있습니다. 웹사이트에 단어 수 계산기(Word Counter) 기능을 추가하고 싶으신가요? 아래의 자바스크립트 코드 스니펫을 활용하면 빠르고 간편하게 구현할 수 있습니다.

var wordsInPost = wordCount(document.querySelectorAll(".posts-content"))

function wordCount(words) {
  var count = 0
  for (var i = 0; i < words.length; i++) {
    count += words[i].textContent.split(" ").length
  }
  return count
}

console.log(wordsInPost)

위 코드를 브라우저 개발자 콘솔에 복사해서 붙여넣으면 어떤 웹사이트에서든 바로 테스트해 볼 수 있습니다. 다만, 분석하려는 요소에 맞는 올바른 선택자(selector)를 지정했는지 꼭 확인하세요.

자바스크립트 함수의 작동 원리

• 지정한 대상 요소 내부의 모든 단어를 계산합니다. 위 예제에서는 .post-content 클래스 선택자를 대상으로 합니다.
• 단어 수에는 제목, 문단, 목록, 인용문 등 텍스트가 포함된 모든 요소가 집계됩니다. 즉, 관련 있는 모든 콘텐츠가 계산 대상입니다.
• 공백이나 콤마 같은 불필요한 문자는 집계에서 제외됩니다.

자바스크립트 함수 사용 방법

• .post-content 클래스를 여러분의 게시물이나 페이지에 맞는 클래스, 아이디(id), 또는 요소 선택자로 교체하기만 하면 됩니다.

참고: querySelectorAll() 대신 getElementsByClassName() 메서드를 사용해도 동일한 결과를 얻을 수 있습니다.

코드는 평소 사용하는 브라우저의 콘솔에서 직접 테스트하거나, CodePen에서도 확인해 볼 수 있습니다.