JavaScriptで文字数とバイト数を数える

JavaScriptで入力した文字数を数えたい。
検索したらズバリのサンプルコードが紹介されていた。

全角・半角を判別して文字数をカウントするJavaScript

フォームに入力された文字列をエンコードして「%u」の文字があれば全角扱い。
それ以外は半角扱いで、半角での文字数をカウント。

JavaScript 1 はじめてのプログラミングとJavaScriptの基礎 (CD-ROM付) (プログラミング学習シリーズ) (2009/01/30) 日向 俊二 商品詳細を見る

JavaScriptコード

<script type="text/javascript">
<!--
//文字数の設定
var stopCount = 50;

function strLength(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}
function showLength( str,name ) {
	var strCount = Math.ceil(strLength(str).toString() / 2);
	if(strCount > stopCount){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50 Over!</em>';
	}else if(strCount == stopCount){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50</em>';
	}else{
		document.getElementById(name + "Inner").innerHTML = strCount + " / 50";
	}
}

window.onload = function(){
	var text2Check = document.getElementById("text2");
	text2Check.onkeyup = function(){
		showLength(document.getElementById("text2").value,document.getElementById("text2").id);
	}
}

// -->
</script>

 

HTMLコード

<form id="textForm" name="textForm" method="post" action="">
	<p>
		<label> text1
		<input name="text1" type="text" id="text1" size="50" onkeyup="showLength(value,id);"/>
		</label>
		<span id="text1Inner">0 / 50</span>
	</p>
	<p>
		<label>text2
		<input name="text2" type="text" id="text2" size="50" />
		</label>
		<span id="text2Inner">0 / 50</span>
	</p>
</form>

仕様
* 全角は1文字
* 半角は2文字で1文字
* 半角は切り上げカウント
* つまり、「あa」は2文字とカウント、「あaa」も2文字とカウント
* 指定した文字数を超えると出るメッセージが変更

これだと、全角も半角も1文字ずつとして数えてくれる。

●文字列のバイト数を数える
上記の方法を流用して、文字列のバイト数を数えたい。
半角は1バイト、全角は2バイトとしてカウントする場合は、

var strCount = Math.ceil(strLength(str).toString() / 2);

↓

var strCount = strLength(str).toString();

に変更すればOK

これで、
・文字数のカウント
・バイト数のカウント
という二つの機能が用意できた。