文字の半角と全角について

2021/02/17

文字の半角と全角について

段落が2段になるのが見栄えがよくなかったので、入力する段階でチェックするスクリプトを書いた。

inp_idの文字列に対してlenを測り、p_idに結果を表示する。lenがnum以上であれば文字を赤くする、というコード。

countWord = (p_id, inp_id, num) =>{
    let p_element = document.getElementById(p_id);          // inputのid
    let len = document.getElementById(inp_id).value.length; // 文字数
    p_element.innerHTML = len + "文字";
    if(len >= num){
        p_element.style.color = "red";
    }else{
        p_element.style.color = "";
    }
}

上記の実装だと文字数をカウントするコードであって、例えば全角10文字ではみ出すものとすると半角10文字ならOKであるが、実際にはp_idは赤くなる（警告する）

本当にやりたいのは半角と全角をチェック。文字数ではなくて、幅数（といっていのか）をカウントするようにしたい。

自分がプログラミングを習ったときは「半角は1バイト、全角は2バイト」と習ったような気がしているが、全然そうではない。

厳密に判定をしようとするとかなりメンドクサイので

半角は英数字のみ入力する
全角は日本語のみ入力する
入力するのはわたしだけ

とする前提のもと、かなり乱暴な実装をした。

countWord = (p_id, inp_id, num) =>{
    let p_element = ""; // inputのid
    let str = "";       // 文字列
    let str_wid = 0;    // 文字列の総幅
    let str_dec = 0;    // 文字コード（10進数）
    // =============================================================================
    str = document.getElementById(inp_id).value;
    for(let i=0; i<str.length; i++){
        str_dec = str.charCodeAt(i);
        if(str_dec >= 33 && str_dec <= 126){
            str_wid = str_wid + 0.5;
        }else{
            str_wid = str_wid + 1;
        }
    }
    // =============================================================================
    p_element = document.getElementById(p_id);
    p_element.innerHTML = str_wid + "文字";
    if(str_wid >= num){
        p_element.style.color = "red";
    }else{
        p_element.style.color = "";
    }
}

charCodeAtは指定された位置にある UTF-16 コードユニットを表す 0 から 65535 までの整数を返すメソッド。