rails jquery 全角2文字、それ以外半角1文字でカウント

Question

Twitterのようなアプリを作成しています。
ご回答いただけるとありがたいです。よろしくお願いします！

実現したいこと

ツイート投稿画面で、文字を入力するとそれに合わせて以下の条件で文字数をカウントできるようにしたいです。
全角は２文字分でカウント、他(半角英数字と改行)は１文字分でカウント。

狙い

日本語での投稿量と英語での投稿量を同じぐらいにするためです。メモリの大きさとかを考慮したいわけではありません。あくまで言語が変わっても最大投稿量を同じぐらいにしたいと考えています。

現状

バリデーションの設定で全角２文字、半角英数字と改行は１文字カウントの設定はできています。

#tweet.rb
class Tweet < ApplicationRecord
  belongs_to :group
  belongs_to :user
  has_one_attached :image

  validates :content, presence: true, unless: :was_attached?,
                      length_with_wide_char: { maximum: 400 }

  def was_attached?
    self.image.attached?
  end
end

#length_with_wide_char_validator.rb
class LengthWithWideCharValidator < ActiveModel::EachValidator
  def validate_each(object, attribute, value)
    value = value.gsub(/\r\n/,"\n")
    count = 0 
    value.split(//).each do |v| 
      v.bytesize > 1 ? count += 2 : count += 1
    end 
    object.errors[attribute] << (options[:content] || "is too long (maximum is %d characters)" % options[:maximum]) if count > options[:maximum]
  end 
end

しかし、現状ではjqueryを用いた目に見える部分での文字数カウントは何を入力しても１文字扱いになっています。
これを全角と半角・改行でカウントを変更したいです。

該当のソースコード

#new.html.erb
<div class="tweet-form">
  <%= form_with model: [@group, @tweet], local: true do |f| %>
    <div class="tweet-form-container">
      <div class="tweet-form-wrapper">
        <div class="tweet-form-upper">
          <%= f.text_area :content, class: "tweet-form-upper-input input-text", autofocus: true %>
        </div>
        <div id="image-list"></div>
        <div class="tweet-form-lower">
          <label class="tweet-form-lower-left">
            <div class="tweet-form-lower-left-icon">
              <span class="camera-icon"><i class="fa fa-camera-retro fa-fw"></i></span>
              <%= f.file_field :image, class: 'hidden' %>
            </div>
          </label>
          <div class="tweet-form-right">
            <div class="input-text-count"></div>
            <div class="tweet-form-submit">
              <%= f.submit 'ツイート', class: "tweet-form-submit-btn" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>
</div>

#count.js
if (document.URL.match( "tweets/new" ) || document.URL.match(/groups/\d+/tweets/\d+/edit/)) {
  $(function (){
    var count = $(".input-text").text().length;
    
    var now_count = 400 - count;

    if (count > 400) {
      $(".input-text-count").css("color","red");
    }
    $(".input-text-count").text(now_count);

    $(".input-text").on("keyup", function() {
      var count = $(this).val().length;
      var now_count = 400 - count;

      if (count > 400) {
        $(".input-text-count").css("color","red");
      } else {
        $(".input-text-count").css("color","black");
      }
      $(".input-text-count").text(now_count);
    });
  });
}

###試したこと・調べたこと(1)
Jqueryで動的に全角改行2文字 半角1文字で文字数カウント
を参考に以下のようにコードを書いてみましたが、全文字１カウントになります。

if (document.URL.match( "tweets/new" ) || document.URL.match(/groups/\d+/tweets/\d+/edit/)) {
  $(function (){

    var result = 0;
    var count = $(".input-text").text().length;
    
    for (var i = 0; i < count ; i++){
      var chr = text.charCodeAt(i);
      if ((chr >= 0x00 && chr < 0x81) ||
        (chr === 0xf8f0) ||
        (chr >= 0xff61 && chr < 0xffa0) ||
        (chr >= 0xf8f1 && chr < 0xf8f4)) {
        result += 1;
      } else {
        result += 2;
      }
    }
    var now_count = 400 - count;

    if (count > 400) {
      $(".input-text-count").css("color","red");
    }
    $(".input-text-count").text(now_count);

    $(".input-text").on("keyup", function() {
      var count = $(this).val().length;
      var now_count = 400 - count;

      if (count > 400) {
        $(".input-text-count").css("color","red");
      } else {
        $(".input-text-count").css("color","black");
      }
      $(".input-text-count").text(now_count);
    });
  });
}

###試したこと・調べたこと(2)
【jQuery】全角を半角２つとして文字数カウントする
を参考に以下のようなコードを書きました。

if (document.URL.match( "tweets/new" ) || document.URL.match(/groups/\d+/tweets/\d+/edit/)) {
  $(function(){
    $('.input-text').on('keyup', function(){
      var len = textLength($(this).val());
      $('.input-text-count').text(len);
    });
  });
  
  function textLength(text){
    var regexp = /[\x01-\x7E\u{FF65}-\u{FF9F}]/mu;
    
    var len = 0;
    for(i = 0; i < text.length; i++){
      var ch = text[i];
      len += regexp.test(new String(ch)) ? 1 : 2;
    }
    return len;
  }
}

これで全角を２文字、他を１文字カウントをすることができました。
次にカウントダウン形式にしたいので、以下のようにしました。

if (document.URL.match( "tweets/new" ) || document.URL.match(/groups/\d+/tweets/\d+/edit/)) {
  $(function(){
    $('.input-text').on('keyup', function(){
      var len = textLength($(this).val());
      $('.input-text-count').text(len);
    });
  });
  
  function textLength(text){
    var regexp = /[\x01-\x7E\u{FF65}-\u{FF9F}]/mu;
    
    var len = 0;
    for(i = 0; i < text.length; i++){
      var ch = text[i];
      len += regexp.test(new String(ch)) ? 1 : 2;
    }
  
    var count = $(".input-text").text().length;
    
    var now_count = 400 - count;

    if (count > 400) {
      $(".input-text-count").css("color","red");
    }
    $(".input-text-count").text(now_count);

    $(".input-text").on("keyup", function() {
      var count = $(this).val().length;
      var now_count = 400 - count;

      if (count > 400) {
        $(".input-text-count").css("color","red");
      } else {
        $(".input-text-count").css("color","black");
      }
      $(".input-text-count").text(now_count);
    });
  }
}

こうすると全文字１カウントになってしまいます。
カウントダウン方式で全角２文字・他１文字カウントになるようにご助言いただきたいです。

以上になります。

Comments

[yambejp]

jsとrubyどちらでやりたいのでしょうか

[shawn_709]

railsにjqueryを導入して実装を進めています。
（答えになっていなかったらすみません。）

Answer 1

こんにちは。
「以下のようにしました」の中で変だなと思うところにコメントを付けてみました。

$(function(){
  $('.input-text').on('keyup', function(){
    var len = textLength($(this).val());
    $('.input-text-count').text(len);
  });
});

// textLength の戻り値がおかしい
// 数値を期待しているはず
function textLength(text){
  // textLength の外に書いた方が速そう
  var regexp = /[\x01-\x7E\u{FF65}-\u{FF9F}]/mu;

  // 計算された len を使っていない
  var len = 0;
  for(i = 0; i < text.length; i++){
    var ch = text[i];
    len += regexp.test(new String(ch)) ? 1 : 2;
  }

  // ここから .css() や .text() で書き換えてますが
  // textLength ではテキストの長さの計算だけしましょう
  var count = $(".input-text").text().length;
  // len ではなく count を引いている
  var now_count = 400 - count;
  // 色の設定(重複)
  if (count > 400) {
    $(".input-text-count").css("color","red");
  }
  // カウントの設定(重複)
  $(".input-text-count").text(now_count);

  // textLength() が呼ばれるたびに keyup イベントが登録されている
  $(".input-text").on("keyup", function() {
    var count = $(this).val().length;
    var now_count = 400 - count;
    // 色の設定(重複)
    if (count > 400) {
      $(".input-text-count").css("color","red");
    } else {
      $(".input-text-count").css("color","black");
    }
   // カウントの設定(重複)
    $(".input-text-count").text(now_count);
  });
}

修正したのは以下です。
https://jsfiddle.net/fntwzjv2/