文字数数えるスクリプト

文書の文字数をサイドバーに表示するスクリプト

code:script.js

// 文字数の表示

// 文字数表示用エレメントを追加

// (各ページのときのみ)

// 文字数を数える(改行を除く)

const getCharCount = () => {

return Array.from(

document.getElementById('editor').getElementsByTagName('span')

).filter(v => {

const className = v.getAttribute('class')

return (!!className) &&

(v.getElementsByTagName('br').length == 0)

})

.length;

}

// 行数を数える

const lineCount = () => {

return document.getElementById('editor')

.getElementsByClassName('line')

.length

};

// 文字数/行数を数えて表示を更新

const updateCharCount = () => {

document.getElementById('char-without-br').innerHTML = getCharCount()

document.getElementById('br-only').innerHTML = lineCount()

};

let charWithoutBr = document.createElement('div'),

brOnly = document.createElement('div');

charWithoutBr.setAttribute('id', 'char-without-br');

brOnly.setAttribute('id', 'br-only');

charWithoutBr.innerHTML = brOnly.innerHTML = '0';

pageInfo.appendChild(charWithoutBr);

pageInfo.appendChild(brOnly);

updateCharCount();

// キー押下で文字数を数えて表示を更新

document.addEventListener('keydown', updateCharCount);

}