JavaScriptの全角・半角変換

下のような記事を目にしました。
7割が経験、Web サイトの入力フォームに「イライラ」――アイシェア調べ

イライラ経験者に、どういったことが原因だったのか聞いたところ(複数回答形式)、「数字が全角・半角入力指定されていた」が73.2%と大多数を占め1 位。2位は「入力項目がとても多かった」で65.9%。以下「住所や郵便番号をすべて手入力する必要があった(43.1%)」「カタカナが全角・半角入力 指定されていた(41.5%)」「メールアドレスを2回記入させられた(39.6%)」「必須項目が指定されていなかった(34.1%)」の順に

確かに「全角にしろ」、「半角で入力しろ」と言われたくないかもしれませんね(個人的にイライラするほどのことでもありませんが)。
そこで、JavaScriptライブラリに全角・半角変換でも追加しようかとアルゴリズムを調べていましたが、MITライセンスなライブラリが既に存在したので意気消沈orz

とりあえず解説

全角・半角変換のアプローチは2つです。

ひとつは、文字コードが半角と全角で文字の順番が同じことを利用したもの(上記のサイトから引用)。

例えば半角英数字と記号では、 U+0021!で、U+00300, U+007e~と なっていますが、これに対応する全角英数字と記号は、 U+ff01で、U+ff10, U+ff5eと いう配置となっています。

要するに全角の文字コードは対応する半角のコード番号+0xfee0という関係ですので、 変換処理でもこの差分を利用します。

こちらの方式はアルファベットの大文字・小文字変換などで昔から使われている方法で個人的にはこちらのほうが好みです。

もう一つは変換テーブルを事前に用意するもの
ぐぐった結果ではこちらのアプローチが多数派ですね(ループするか置換するかは別の話)。

function foo(from) {
    var han = ['1','2','3'];
    var zen = ['1','2','3'];
    var to = [];
    for( var i = 0 ; i < from.length ; i++ ) {
        for(var j = 0 ; j < zen.length ; j++ ) {
            if (from.charAt(i) == zen[j]) {
                to.push( han[j] );
                break;
            }
        }
        if (j == zen.length ) {
            to.push( from.charAt(i) );
        }
    }
    return to.join('');
}

M. K. の紹介

IT屋さんです。プログラミングが大好きで今はJavascriptがお気に入りです。
カテゴリー: JavaScript, プログラミング   タグ:   この投稿のパーマリンク