javascriptで全角文字を2文字・半角文字を1文字として文字数制限をする方法（文字コードはUTF8）

文字コードがUTF-8な時に、「半角40文字以内（半角カタカナは1文字、それ以外の全角は2文字として数える）」みたいな制限を設けたいという要望が時々あるので、それをJavascriptで実装する場合の関数をつくりました。※jquery必須です。

文字コードがShift-JISの時は割と単純なんですが、文字コードがUTF-8だと割と複雑になってしまうという(^_^;)

基本的には文字を分割して、escapeしてみて、マルチバイトでかつ半角カタカナ以外なら2文字としてカウントして、最大長さを超えないように文字をつないでいく感じです。HTMLはこんな感じで、input要素に「data-max-length」を指定します。

<!-- 長さ制限したいinputにdata-max-lengthを設定する -->
<input type="text" data-max-length="40" name="name" value="">

んでjavascriptはこんな感じ。（jQuery必須です。）

$(document).ready(function() {

  $(document).on('change keyup focus', '[data-max-length]', function() {
    var arr = $(this).val().split('');
    var len = 0;
    var maxlen = parseInt($(this).attr('data-max-length'));
    var str = '';
    for (i in arr) {
      len += (escape(arr[i]).match(/%u..../) && !(arr[i]).match(/^[ｦ-ﾟ]$/)) ? 2 : 1;
      if (len <= maxlen) {
        str += arr[i];
      }
    }
    $(this).val(str);
    return;
  });

});

charAt()関数とsubstr関数使った方法もあると思いますがこちらの方法が考え方が分かりやすいかなと。