Vanilla JavaScriptだけで実装！Webページ内の単語数をカウントする方法

Vanilla JavaScriptを使って、Webサイトの特定の部分に含まれるすべての単語をカウントする方法をご紹介します。

記事やページ内の総単語数を把握したい場面は意外と多いものです。Webサイトにワードカウンター機能を実装したいとお考えなら、以下のJavaScriptコードスニペットを使えば、ライブラリ不要で素早く実現できます。

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)

このJSコードをブラウザの開発者ツール（コンソール）にコピー＆ペーストすれば、どのWebサイトでもすぐに動作を試せます。その際は、対象となるセレクターが正しく指定されているかだけご確認ください。

このJavaScript関数の仕組み

• 指定した要素内のすべての単語をカウントします。上記の例では、.post-contentというクラスセレクターを対象にしています。
• カウント対象には、見出し・段落・リスト・引用（blockquote）など、該当範囲内のすべてのテキスト要素が含まれます。
• 空白スペースやカンマなどはカウントから除外されます。

JavaScript関数の使い方

• .post-contentの部分を、ご自身の投稿やページで実際に使用しているクラス名・ID・要素セレクターに置き換えてください。

補足：querySelectorAll() の代わりに getElementsByClassName() を使うことも可能です。

お使いのブラウザのコンソールでコードを直接試すこともできますし、CodePenなどのオンラインエディタで検証するのもおすすめです。

日本語テキストをカウントする場合の注意点

上記のコードは半角スペースで文字列を分割しているため、英語のような分かち書きされた言語には有効ですが、日本語のように単語間にスペースがない文章では正確なカウントができません。日本語のテキストを扱う場合は、「TinySegmenter」や「kuromoji.js」といった形態素解析ライブラリを併用すると、より精度の高い単語数カウントが可能です。