algonote

There's More Than One Way To Do It

JavascriptでTweetの文字数を数える

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

背景

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

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

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

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

課題

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

UI綺麗だけどみづらい。

実装

以下を参考にしながらforループで文字を一つづつカウント。Unicodeの範囲がCJKだったら2文字、それ以外なら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 ");
  });
});

ハングルにも半角があるんですね。 色々調べたけど、ページによってUnicodeの範囲が違っていて、あんまり自信がないです。

結果

Tweet Counter