jQueryで Twitterと同じルールで文字数をカウントする

Twitterの文字入力のルールは少々面倒で、日本語1字、英語0.5、URLは何字だか以上は何字になる...etc

ルール全部調べて自分で実装するのは面倒です。

公式からtwitter-text.jsというパッケージが公開されているのでそれを用います。

npmからインストールします

npm i twitter-text

app.js

const twitter = require('twitter-text')

$(function(){
    $('#testInput').on('keyup',function(){
        const content = $(this).val();
        const valid = twitter.parseTweet(content);
        /* Returns:
          {
            weightedLength: 20,
            permillage: 71,
            valid: true,
            displayRangeEnd: 19,
            displayRangeStart: 0,
            validRangeEnd: 19,
            validRangeStart: 0
          }
        */
    });
})

parseTweetした戻り値のweightedLengthが入力欄の文字数になります。
あとはweightedLengthを表示してあげればいい感じになります

weightedLength：アルゴリズムによって計算された加重長を示す整数。
permillage：最大加重長に対する消費加重加重長の比率に対応する整数値。
valid：有効なツイートかどうかを示すブール値。
dispayRangeStart：ツイート文字列の開始インデックスを持つ整数
displayRangeEnd：ツイート文字列の終了インデックスを含む整数（含む）
validDisplayRangeStart：ツイート文字列の有効な開始インデックスを示す整数
validDisplayRangeEnd：ツイート文字列の有効な終了インデックスを示す整数。これは、displayRangeEnd（これを含む）よりも小さい場合があります。

ちなみに

Java
Ruby
JavaScript
Objective-C

のものがTwitter公式から提供されています。

参考