JavascriptでTweetの文字数を数える

Javascriptで新仕様のTwitter用に文字数カウンターを作りました。 Tweet Counter f:id:hiromichinomata:20171109034032p:plain

背景

Twitterの文字数が拡大され280文字までになりました(英数字)。

英数字は1文字としてカウント

0---------0---------0---------0---------0---------0---------0---------0---------0---------0---------1---------1---------1---------1---------1---------1---------1---------1---------1---------1---------2---------2---------2---------2---------2---------2---------2---------2---------
— Hiromichi NOMATA (@hiromichinomata) 2017年11月8日

日本語、韓国語、中国語は2文字としてカウント

あっっっっっっっっっあっっっっっっっっっあっっっっっっっっっあっっっっっっっっっあっっっっっっっっっいっっっっっっっっっいっっっっっっっっっいっっっっっっっっっいっっっっっっっっっいっっっっっっっっっうっっっっっっっっっうっっっっっっっっっうっっっっっっっっっうっっっっっっっっっ
— Hiromichi NOMATA (@hiromichinomata) 2017年11月8日

半角カタカナは２文字扱い

ｱｯｯｯｯｯｯｯｯｯｱｯｯｯｯｯｯｯｯｯｱｯｯｯｯｯｯｯｯｯｱｯｯｯｯｯｯｯｯｯｱｯｯｯｯｯｯｯｯｯｲｯｯｯｯｯｯｯｯｯｲｯｯｯｯｯｯｯｯｯｲｯｯｯｯｯｯｯｯｯｲｯｯｯｯｯｯｯｯｯｲｯｯｯｯｯｯｯｯｯｳｯｯｯｯｯｯｯｯｯｳｯｯｯｯｯｯｯｯｯｳｯｯｯｯｯｯｯｯｯｳｯｯｯｯｯｯｯｯｯ
— Hiromichi NOMATA (@hiromichinomata) 2017年11月8日

課題

カウントが文字数からサークルのカウンターに。 f:id:hiromichinomata:20171109034750p:plain

UI綺麗だけどみづらい。

実装

以下を参考にしながらforループで文字を一つづつカウント。Unicodeの範囲がCJKだったら２文字、それ以外なら1文字。

http://d.hatena.ne.jp/favril/20090514/1242280476 http://www.rikai.com/library/kanjitables/kanji_codes.unicode.shtml https://stackoverflow.com/questions/38156300/regex-how-do-you-match-korean-hangul-letters-in-javascript-es6

$(function(){
  function isCJK(c){ // c: character to check
    var unicode = c.charCodeAt(0);
    if ( (unicode>=0x3000 && unicode<=0x303f)   || // Japanese-style punctuation
         (unicode>=0x3040 && unicode<=0x309f)   || // Hiragana
         (unicode>=0x30a0 && unicode<=0x30ff)   || // Katakana
         (unicode>=0x4e00  && unicode<=0x9fcf)  || // CJK integrated kanji
         (unicode>=0x3400  && unicode<=0x4dbf)  || // CJK integrated kanji ext A
         (unicode>=0xff00 && unicode<=0xff9f)   || // Full-width roman characters and half-width katakana
         (unicode>=0x20000 && unicode<=0x2a6df) || // CJK integrated kanji ext B
         (unicode>=0xf900  && unicode<=0xfadf)  || // CJK compatible kanji
         (unicode>=0x2f800 && unicode<=0x2fa1f) || // CJK compatible kanji
         (unicode>=0xffa0 && unicode<=0xffdc) || // Hangul Half
         (unicode>=0x3131 && unicode<=0xd79d)    // Hangul Full
       )
         return true;

    return false;
  }

  $("#tweet").on('input', function(e){
    var text = $("#tweet").val();
    var length = text.length;
    var count = 0
    for(var i=0; i<length; i++) {
      var character = text.charAt(i)
      if(isCJK(character)){
        count +=2;
      } else {
        count++;
      }
    }
    $('#counter').text(" " + count + "/280 ");
  });
});