多様な文字数をカウントする「Countable.js」

「Countable.js」はパラグラフ数や文字数を動的にカウントするJavaScriptライブラリです。

Countable.js

countable-js

文字数カウントはよく使われる機能ですが、実際に実装しようと思うとなかなか手間です。この「Countable.js」では文字数カウントで必要と思われる4つの機能を持っています。

この画像をもとに解説します。

countable-js-para

 

まずはParagraphs。これは段落です。改行毎にカウントされます。 
次はWords。スペースで区切られた単語毎にカウントされます。
Charactersは文字数です。スペースはカウントしません。
最後にCharacters(with spaces)です。これはスペース含めた文字数カウントです。

 

それでは「Countable.js」の実装方法をご紹介します。まずは外部ファイルを読み込みます。

<script src="Countable.js"></script>

 

HTMLはそれぞれの機能に対応するDOM要素を用意しました。

<ul>
  <li>Paragraphs:<span id="paragraphs">0</span></li>
  <li>Words:<span id="words">0</span></li>
  <li>Characters:<span id="characters">0</span></li>
  <li>Characters (with spaces):<span id="all">0</span></li>
</ul>

 

JavaScriptはこのように実装します。counterという配列に対して、連想配列で値が格納されています。

var area = document.getElementById('countableArea');
Countable.live(area, function(counter){
  document.getElementById('paragraphs').innerHTML = counter['paragraphs'];
  document.getElementById('words').innerHTML = counter['words'];
  document.getElementById('characters').innerHTML = counter['characters'];
  document.getElementById('all').innerHTML = counter['all'];
})

 

するとこのように作ることが出来ます。

countable-js-sample

 

便利ですねー。文字数カウントを検討している人は参考にどうぞ。

 

Home > JavaScript > 多様な文字数をカウントする「Countable.js」

Return to page top