文章内の非漢字をチェックして、赤字表示

文字列の中の漢字以外を赤字で表示するチェックプログラムを作った。
check Non Kanji char
<!DOCTYPE HTML>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<title>文字列の中の漢字チェック</title>
<script type="text/javascript">

// 漢字（UnicodeのCJK統合漢字の範囲）
var kanji = new RegExp(/[\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/);

// サロゲートペア
var hs = new RegExp(/[\ud800-\udbff]/);
var ls = new RegExp(/[\udc00-\udfff]/);

// 漢字以外をチェック
function checkNonKanji(){

	var text  = document.getElementById("checktext").value;
	text = text.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;');
	var result = "";
	// 入力されたテキストを1文字ずつチェック
	chars = text.split('');
	for (i=0; i<chars.length; i++) {
		c = chars[i];
		// 漢字だったら
		if (c.match(kanji)) {
			result += c;
		} else {
			result += '<strong>' + c +'</strong>';				// 漢字ではないとする
		}
		// 拡張領域文字は漢字ではないとする。
		if (c.match(hs)) {
			c += chars[i+1];									// 直後の相方
			result += '<strong>' + c +'</strong>';
		}
		else if (c.match(ls)) {									// 上位と一緒に処理しているはずなので、無視。
			continue;
		}
	}
	result = result.replace(/\n/g, '<br />');
	document.getElementById("result").innerHTML = result;
}
</script>
<style>
strong {
	color:#f00;
	font-size:1.1em;
}
.small {
	font-size: 80%;
	color: #666;
}
#result {
	border:solid 1px #999;
	padding:0.5em 1em;
	background: #f0f0f0;
}
</style>
</head>
<body id="tool">
<div id="article">
	<h1>文字列の中の漢字 チェック</h1>
	<p>文字入力欄に文字を入力し、下の[チェック]ボタンをクリックしてください。<br />
		結果欄に漢字以外を赤くした文字列が表示されます。</p>
	<form id="checkform">
		<label for="checktext">確認する文章を貼り付けてください。</label>
		<br />
		<textarea rows="10" cols="60" name="checktext" id="checktext"></textarea>
		<br />
		文字列の中に漢字以外が入っているか
		<input type="button" value="チェック" onclick="checkNonKanji();" />
	</form>
	<h2>結果</h2>
	<p>このように「<strong>非漢字</strong>」赤字で表示されるのが、漢字ではありません。</p>
	<p id="result"> </p>
</div>
</body>
</html>
文章内の非漢字をチェックして、赤字表示

カテゴリー
