Ruby on Rails3で文字数を数える

実行環境はruby1.9.3p0,rails3.2.2,postgres

難易度★★☆☆☆

railsアプリでテキストエリアに入力可能な残りの文字数をクライアント(ブラウザ)側でカウントしたかったので実装しました。

やり方

jqueryを利用します。テキストエリアに入力できる残りの文字数を表示します。

htmlコード

<textarea cols="50" id="text" maxlength="1000" name="text" placeholder="内容" rows="10"></textarea>
<div id="count_up">1000</div>

jqueryコード

$(function(){
  $("textarea").keyup(function(){
    var counter = $(this).val().replace(/\n|\r\n/g,"aa").length;// 改行を適当な二文字で置換
    $("#count_up").text((1000 - counter));
    if(counter === 0){
      $("#count_up").text("1000");
    }
  });
});

コードの説明

さて、上記のコードを見ると「おや？」と思った部分があると思います。おそらくreplace(/\n|\r\n/g,"aa")の部分だと思います。
この部分では、テキストエリア内に改行文字が含まれているとき、改行文字をaaという任意の2文字に置換しています。
なぜなら、railsは改行文字を二文字として認識するからです。
しかし、javaScriptでは一文字にしかカウントされません。
そのためこうしないと、rails側のvalidationの文字数とクライアント(ブラウザ)側の文字数が一致しなくなってしまいます。

railsで文字数取得

count = params[:text].split(//).size

lengthだとバイト数の取得となるので、上記のように配列にして正規表現で取得します。このとき、改行は二文字として認識されます。

最後に

入力文字数の多いテキストエリアで、残りの入力文字数を表示するのは良いインターフェースです。
それでわ。

---

参考サイト

• Railsで全角・改行を含む文字数をカウントする

この記事がお役にたちましたらシェアをお願いします

Tweet