ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    JavaScriptで文字数とバイト数を数える

    このエントリーを含むはてなブックマーク はてなブックマーク - JavaScriptで文字数とバイト数を数える あとで読む
    JavaScriptで入力した文字数を数えたい。
    検索したらズバリのサンプルコードが紹介されていた。

    全角・半角を判別して文字数をカウントするJavaScript

    フォームに入力された文字列をエンコードして「%u」の文字があれば全角扱い。
    それ以外は半角扱いで、半角での文字数をカウント。



    JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ)JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ)
    (2009/01/30)
    日向 俊二

    商品詳細を見る


    JavaScriptコード

    <script type="text/javascript">
    <!--
    //文字数の設定
    var stopCount = 50;

    function strLength(strSrc){
    len = 0;
    strSrc = escape(strSrc);
    for(i = 0; i < strSrc.length; i++, len++){
    if(strSrc.charAt(i) == "%"){
    if(strSrc.charAt(++i) == "u"){
    i += 3;
    len++;
    }
    i++;
    }
    }
    return len;
    }
    function showLength( str,name ) {
    var strCount = Math.ceil(strLength(str).toString() / 2);
    if(strCount > stopCount){
    document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50 Over!</em>';
    }else if(strCount == stopCount){
    document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50</em>';
    }else{
    document.getElementById(name + "Inner").innerHTML = strCount + " / 50";
    }
    }

    window.onload = function(){
    var text2Check = document.getElementById("text2");
    text2Check.onkeyup = function(){
    showLength(document.getElementById("text2").value,document.getElementById("text2").id);
    }
    }

    // -->
    </script>

     



    HTMLコード

    <form id="textForm" name="textForm" method="post" action="">
    <p>
    <label> text1
    <input name="text1" type="text" id="text1" size="50" onkeyup="showLength(value,id);"/>
    </label>
    <span id="text1Inner">0 / 50</span>
    </p>
    <p>
    <label>text2
    <input name="text2" type="text" id="text2" size="50" />
    </label>
    <span id="text2Inner">0 / 50</span>
    </p>
    </form>



    仕様
    * 全角は1文字
    * 半角は2文字で1文字
    * 半角は切り上げカウント
    * つまり、「あa」は2文字とカウント、「あaa」も2文字とカウント
    * 指定した文字数を超えると出るメッセージが変更



    これだと、全角も半角も1文字ずつとして数えてくれる。

    ●文字列のバイト数を数える
    上記の方法を流用して、文字列のバイト数を数えたい。
    半角は1バイト、全角は2バイトとしてカウントする場合は、

    var strCount = Math.ceil(strLength(str).toString() / 2);



    var strCount = strLength(str).toString();


    に変更すればOK

    これで、
    ・文字数のカウント
    ・バイト数のカウント
    という二つの機能が用意できた。
    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/422-59d83d79

    FC2Ad