文字数カウント

入力した文字数をカウントできます。

文字数
(改行は除く)
文字数
(改行と空白は除く)
0 0
全角文字数 半角文字数
0 0
バイト数
(改行は1バイト)
行数
0 0

文字数カウントの注意事項

  • 文字数カウントなどは正確性を保証するものではありません。
  • 文字数カウントなどに関して当サイトは一切責任を負いません。
出張/持込/宅配でパソコン修理・設定 24時間365日対応

文字数カウントツールについて

文字数カウントツールはJavaScriptで制作しています。掲載しているソースコードは解説のために改変や省略をしているので、実際のソースコードとは異なります。

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

HTML

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>

文字数カウントを実行

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

JavaScript
$('#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);
}

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

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

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

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

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

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

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

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

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

全角文字の文字数

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

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

半角文字の文字数

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

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

バイト数

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

JavaScript
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行とカウントさせるためです。

JavaScript
let lines = '1';

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

それぞれの数を表示

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

JavaScript
$('#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 バイト数 カウント」などで検索してみてください。

出張/持込/宅配でパソコン修理・設定 24時間365日対応
出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス
コメント パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。