HTMLページの文字数をカウントして表示させる方法

文字数カウント

この記事は約5分で読むことができます。

ワードプレスは便利で、「この記事は○分で読めます。」はもちろん、文字数をカウントするプラグインもあります。

数クリックで希望の表示方法ができるんですよね。

が、「自作で作っているHTMLの文字数をカウントして表示させたい。」となったとき、そう簡単にはいかないんです。

いや、わりと簡単だったので忘備録として。

楽しいjQueryの出番

使うのはjQueryですね。

まずは、<head></head>内でjQueryを読み込んで起きます。ちなみに、「jQueryって何」と疑問を持つ方は知らなくても大丈夫です。

ほとんどコピペで終わる作業なので。

読み込むのはこんなタグですね。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

表示させるためのJavaScriptを書く

文字数をカウントするのはJavascriptのお仕事です。そして表示させるのはHTMLです。

HTMLのぺージ内の<p>要素に入っている文字数をカウントしますが、改行やスペースはカットします。

<p>あいうえお かきこけこ</p>は10文字としてカウントしてくれます。

下記のJava scriptを<head>内や<body>内に挿入します。

<script>
$(function(){
	var textLengthReplace = $('p').text().replace(/\s+/g,'').length;
	$('#textLengthReplace dd').prepend(textLengthReplace);
});
</script>

ちなみに、このコードは
http://black-flag.net/jquery/20121017-4244.html
から頂きました。ありがとうございます。

HTMLで表示させる

そして表示させたいところに下記のタグを挿入します。

<dl id="textLengthReplace">
<dt></dt>
<dd></dd>
</dl>

からのタグなんですが、<dd></dd>の中にカウントされた文字数が挿入されます。

この仕組はJava Scriptが理解できる人しかわからないですね。

この際、「Java scriptを勉強してみよか。」と調べていましたが眠くなったので辞めました。

目的が達成できればいいんです。別にプログラマーになるわけじゃないですからね。

デモ

(文字)

うまく表示できました!\(^o^)/

少し文字を大きく表示させているのはCSSです。

<dd style="font-size:30px;color:#ff6600;">(文字)</dd>

まとめ

上記のデモはWP上ですが、これはHTMLページでもできます。

ステップ1:jQueryを読み込む

ステップ2:文字カウントのためのJava Scriptを書く

ステップ3:表示させるためのHTMLを書く

ちなみに、なんで<dd>じゃなきゃだめなの?と思って<span id=”textLengthReplace”>で試してみましたが表示されませんでした。

わかりません。

CSSがわかってないのか、java scriptがわかっていないのか。