サロゲートペアが含まれてるかをJavaScriptでチェックする方法を調べたときのメモ。
ユーザが入力した値にサロゲートペアが含まれていたらエラーとする要件がありましたが、どこでチェックするかに少し悩みました。画面が大量にありサーバ側でチェックするのはパフォーマンス的に不安でしたので、ブラウザ側でチェックすることにしました。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * TESTクラスの項目でサロゲートペアをチェックする。 */ function setEvent() { $('.TEST').blur(function() { var object = $(this); if (chkSurrogatePair($(this).val())) { alert('入力にサロゲートペアが含まれています。'); window.setTimeout(function() { object.focus(); object.select(); }, 1); } }); } /** * サロゲートペアが含まれているかをチェックする * 検査対象文字が上位もしくは下位サロゲートであればtrueを返す */ function chkSurrogatePair(str) { for ( var i = 0; i < str.length; i++) { var c = str.charCodeAt(i); if ((0xD800 <= c && c <= 0xDBFF) || (0xDC00 <= c && c <= 0xDFFF)) { return true; } } return false; } |
また、ブラウザ側でもタイミングには迷いましたが、今回は入力欄からフォーカスが外れた時にチェックして、修正するまでフォーカスが外れないようにしてみました。
サンプルコードでは、クラス名がTESTというHTML要素のblurイベントに一括でチェックのイベントをセットしています(^^)/
