by WebSurfer
24. September 2017 14:12
先の記事「全角数字を半角に変換」は C# のコードで書きましたが、それと同等なコードを JavaScript で実装してみました。
JavaScript の String.prototype.replace(), String.fromCharCode(), String.prototype.charCodeAt() の使い方の備忘録ですので、記事としては面白くないと思います。スミマセン（汗）
上記のメソッドを利用して、テキストボックスに全角数字交じりの文字をタイプしてフォーカスを外すと全角数字 ⇒ 半角数字に変換するサンプルを以下に書いておきます。上の画像はその実行結果です。
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JavaScript で全角数字 ⇒ 半角数字</title>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
//<![CDATA[
var zen2han = function(str) {
str = str.replace(/[０-９]/g, function (s) {
return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
})
return str;
}
$(function () {
$("#text1").on("change", function () {
var str = $(this).val();
$(this).val(zen2han(str));
});
});
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>JavaScript で全角数字 ⇒ 半角数字</h2>
<p>入力してフォーカスを外すと全角数字 ⇒ 半角数字に変換</p>
<input id="text1" type="text" style="width: 350px;" />
</form>
</body>
</html>
テキストボックスの change イベントでの書き換えのコーディングが面倒なので、その部分は jQuery を使ってますが、変換するためのメソッドは上記の JavaScript のメソッドを使っています。
replace メソッドは、第一引数の正規表現 /[０-９]/g にマッチした文字列の一部または全てを、第二引数に指定される文字列で置き換えた新しい文字列を返します。
第二引数には新しい部分文字列を生成するために実行される関数を指定することができます。上の例では匿名関数 function (s) { ... } を使っています。
全角数字の UTF-16 コードから 0xFEE0 を引くと半角数字の UTF-16 コードになるので、匿名関数 function (s) { ... } は JavaScript の charCodeAt メソッドと fromCharCode メソッドを利用して全角数字を半角数字の文字列に変換します。
具体的には (1) charCodeAt メソッドでインデックス 0 に位置する文字の UTF-16 コードを表す整数を取得、(2) それから 0xFEE0 を引いて半角数字の UTF-16 コードを取得、(3) fromCharCode メソッドで指定された UTF-16 値の文字列を取得して戻り値として返しています。