jQuery にて文字数による制御する場合の注意点
はじめに
このブログとは別に運営しているブログがあるのですが、大幅にカスタマイズしようと頑張っているところです。そこで、ある class 内で文字数による制御を行いたいといろいろと試行錯誤していたとこです。jQueryの .length を使うことで、文字数を取得することができるのですが全角文字、半角文字どちらでも１文字としてカウントされてしまいます。単純に文字数を知りたければ問題ないかもしれませんが、ある決まった幅の div の中に文字数を調整して表示したい場合、全角１０文字と半角１０文字では、表示された際の幅が異なってきます。そこで、自分なりに解決策を出しました。
問題点
テキストエディタでも、Excelでもなんでもいいですが、「あいうえおかきくけこ」と「abcdefghij」と打ち込んでみていただければわかるかと思いますが、表示される横幅が違います。
例えば、決まった幅・高さの div に 文字を表示させたい場合、文字数を越えると超えた分は表示されません。表示されない分を「...」とかに書き換えたい場合なんかに、文字数で制御したいと私は考えたのですが、jQueryの .length では全角と半角の文字ともに１文字と返すため、.length では制御できないことになってしまいます。
解決策
そこで、全角は２文字として、半角は１文字としてカウントされるようにjQueryを書いてみました。内容は以下の様になってます。
<script type="text/javascript">
<!-- 全角スペースは２文字 -->
<!-- 全角は２文字 -->
<!-- 半角は１文字 -->
<!-- 半角スペースは１文字 -->
<!-- 記号系はわからない（調べてない）多分１文字 -->
$(function(){
$("textarea").bind("keydown keyup keypress change",function(){
var zen = $(this).val().match(/[^0-9 A-Z a-z]/g).length;
var han = $(this).val().match(/[0-9 A-Z a-z]/g).length;
var zen2 = zen * 2;
var allall = han + zen2;
$(".count").html(allall);
$(".count1").html(han);
$(".count2").html(zen);
});
});
</script>たいしたことはしていません。正規表現で、0,1,2,...,9 とA,B,C,...,Z と a,b,c,...,z の文字以外の文字をカウントしてそれを２倍。さらには、全体から左記の文字数を引いて、２倍したのと足しているだけです。AAAやらBBBやらpはそれぞれに合わせて書き換えてください。ここまでだせれば、文字数で制御が可能と成ってきます。
demo
でもです。テキストエリアに何か書き込んで（コピペでも）みると、下にトータルの文字数（これは、全角文字１文字を２とし、半角文字１文字を１とした時の数。）、半角の文字数、全角の文字数が表示されると思います。
現在0
半角0
全角0
さいごに
文字数について半角と全角で幅が異なってるなんて言っておきながら、そもそも、全角の「１」の幅に対して半角の「1」の文字幅が1/2とは限らないわけです…。すると、最初に言った表示幅を決め打ちして、文字が表示幅からはみ出たら〜ってのは現実的でないような。こう言ったことはCSSのみで出来ようです。以下参照。
以上
