入力した文字数をカウントできます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

使用しているJavaScriptのライブラリ

• jQuery v3.3.1

HTML

<textarea id="input-characters"></textarea>

<table class="bordered-table">
    <tr>
        <th>文字数<br>（改行は除く）</th>
        <th>文字数<br>（改行と空白は除く）</th>
    </tr>
    <tr>
        <td id="result-characters-in-blanks">0</td>
        <td id="result-characters">0</td>
    </tr>
    <tr>
        <th>全角文字数</th>
        <th>半角文字数</th>
    </tr>
    <tr>
        <td id="result-fullwidth-characters">0</td>
        <td id="result-halfwidth-characters">0</td>
    </tr>
    <tr>
        <th>バイト数<br>（改行は1バイト）</th>
        <th>行数</th>
    </tr>
    <tr>
        <td id="result-bytes">0</td>
        <td id="result-lines">0</td>
    </tr>
</table>

文字数カウントを実行

テキストエリアに文字が入力された時に文字数をカウントします。

$('#input-characters').on('keyup', () => {
    charactersCount();
});

function charactersCount() {
    let inputVal                 = $('#input-characters').val();
    let charaExcLineBreaks       = inputVal.replace(/[\n]/g, '').length;
    let charaExcLineBreaksSpaces = inputVal.replace(/[\n\s　]/g, '').length;
    let charaFullwidth           = inputVal.replace(/[\x01-\x7E\n]+/g, '').replace(/[\uff65-\uff9f]/g, '').length;
    let charaHalfwidth           = inputVal.replace(/[^\x01-\x7E]+/g, '').replace(/[\n]+/g, '').length;
    let charaKanaHalfwidth       = inputVal.replace(/[^\uff65-\uff9f]/g, '').length;
    let bytes                    = getBytes(inputVal);
    let lines                    = '1';
    
    charaHalfwidth += charaKanaHalfwidth;

    if (inputVal.match(/[\n]/g)) {
        lines = inputVal.match(/[\n]/g).length + 1;
    } else if (inputVal === '') {
        lines = '0';
    }
    
    $('#result-characters-in-blanks').text(charaExcLineBreaks);
    $('#result-characters').text(charaExcLineBreaksSpaces);
    $('#result-bytes').text(bytes);
    $('#result-lines').text(lines);
    $('#result-fullwidth-characters').text(charaFullwidth);
    $('#result-halfwidth-characters').text(charaHalfwidth);
}

入力された文字列を変数に格納

入力された文字列を一旦変数に格納します。

let inputVal = $('#input-characters').val();

改行コードを含まない文字数

改行コードを削除して、改行コードを含まない文字数をカウントします。
「\n」は改行コードの正規表現です。

let charaExcLineBreaks = inputVal.replace(/[\n]/g, '').length;

改行コードと半角スペースを含まない文字数

改行コードと半角スペースを削除して、改行コードと半角スペースを含まない文字数をカウントします。
「\n\s　」は改行コード、半角スペース、全角スペースの正規表現です。

let charaExcLineBreaksSpaces = inputVal.replace(/[\n\s　]/g, '').length;

全角文字の文字数

1バイト文字と半角カナを含まない文字数をカウントします。
「\x01-\x7E」はASCIIの16進数表記の正規表現です。
「\uff65-\uff9f」はUnicodeの16進数表記の正規表現です。

let charaFullwidth = inputVal.replace(/[\x01-\x7E\n]+/g, '').replace(/[\uff65-\uff9f]/g, '').length;

半角文字の文字数

半角文字の文字数をカウントします。
入力された文字列から1バイト文字ではないものを削除した上で、入力された文字列から半角カナ以外の文字を削除した文字数を足しています。

let charaHalfwidth     = inputVal.replace(/[^\x01-\x7E]+/g, '').replace(/[\n]+/g, '').length;
let charaKanaHalfwidth = inputVal.replace(/[^\uff65-\uff9f]/g, '').length;
charaHalfwidth         += charaKanaHalfwidth;

バイト数

バイト数をカウントします。

let bytes = getBytes(inputVal);

function getBytes(str) {
    str = str.replace(/[\uff65-\uff9f]/g, 'K');
    let hex = '';
    
    for (var i = 0; i < str.length; i++) {
        hex += str.charCodeAt(i).toString(16).replace(/^a$/, 'br');
    }
    
    return hex.length / 2;
}

1. 2バイトの半角カタカナを1バイトとして扱うために、1バイトの「K」に置換します。
2. charCodeAtメソッドでUTF-16コードユニット値を参照します。
3. toStringメソッドの引数に16を指定して16進数で表した文字列を参照します。
4. aをbrに置換して変数に格納します。
5. 変数に格納した文字列の文字数を2で割ります。

上記の流れでバイト数を取得します。半角の16進数で表した文字列（※）は2文字、全角の16進数で表した文字列は4文字になることを利用しています。
4でaをbrに置換するのは、改行コードの16進数コードがaであり、aのまま2で割ると0.5バイト扱いになるためです。
※16進数で表した文字列とUnicodeコードポイントはほぼ一致します。

行数

行数を変数に格納します。
改行コード数に1を足して行数としています。足すのは、改行していなくても1行とカウントさせるためです。

let lines = '1';

if (inputVal.match(/[\n]/g)) {
    lines = inputVal.match(/[\n]/g).length + 1;
} else if (inputVal === '') {
    lines = '0';
}

それぞれの数を表示

textメソッドでそれぞれの数をセルのテキストとしてセットします。

$('#result-characters-in-blanks').text(charaExcLineBreaks);
$('#result-characters').text(charaExcLineBreaksSpaces);
$('#result-bytes').text(bytes);
$('#result-lines').text(lines);
$('#result-fullwidth-characters').text(charaFullwidth);
$('#result-halfwidth-characters').text(charaHalfwidth);

おわりに

日本語はほぼ意図通りにカウントできますが、外国語には対応していないので、多言語対応する場合はそれぞれの言語の特性を考慮する必要があります。また、バイト数のカウントにencodeURIComponentメソッドを使う方法などもあるので、バイト数をカウントする際は「javascript バイト数 カウント」などで検索してみてください。