記事の文字数カウンターを設置する

「自分がこの1記事に何文字費やしたのか。」これを知れるのは、ブログを書く上で充実感につながる、と思う。ツイッターに文章を投稿するときにも、140文字に近いときの方がなんとなく達成感がある。noteに投稿するときだって同じ。たくさん書いたなあと、あとから記事を見返したときに充実感を感じたい。

ということで、このブログに文字数カウンターを導入しようと思う。
というのが本記事の趣旨である。

追加した実装について

文字数カウンターは以下のような実装になっている。

  1. <article>タグ内の要素を取得
  2. 1で取得した文字列から改行や空白を取り除く
  3. HTMLとして出力

実際には、以下のコードを今回追加した。 

let str = document.querySelectorAll('article')[0].innerText;
str = str.replace(/\s+/g, '');
document.getElementById('strLen').textContent = str.length;

2行目で使用されているstr.replace(/\s+/g, '')の\sが、スペースや改行を指定する際に必要になる。MDNからの引用を以下に示す。

スペース、タブ、改ページ、改行を含むホワイトスペース文字にマッチします。

参考リンク：正規表現 - JavaScript | MDN

文字数カウンターが実装できた。

文字