【JavaScript】フォーム入力で半角全角に変換するスクリプト

先日、既に運用されているECサイトの検索フォームへ
「もし半角カタカナが入力された場合、全角カタカナへ変換させる機能を追加してほい」
という依頼がきました。

「システムチームで改修対応するのかな」と考えていると、技術部のマネージャーから
「この程度だったらフロントエンド側で実装できる。スクリプトで対応するように！」
との指示を受け、JavaScriptで改修することになりました。

半角カタカナを全角カタカナへ変換させる実装例

JavaScriptで半角カタカナを全角カタカナへ変換させる方法を調べたところ、かなりの数の記述例が検索結果に引っかかりました。
下記が実装例となります。

>> DEMOはこちらから！

半角カタカナを全角カタカナへ変換させるスクリプトの解説

全角・半角カタカナを配列におき、半角カタカナがある場合は文字列置換しています。
解説といっても私が作成したスクリプトではなく流用したものですが・・・・・

■JavaScript

$(function() {

;(function($){
    $.fn.tgConvertString = function(options){

        init(); // 文字配列呼び出し

        $("input").each(function(){
            var type = $(this).attr("class");   // class取得

            switch(type) {
                case "searchtext" :
                    // 半角カタカナ→全角カタカナ
                    $(this).change(function(){
                        var str = $(this).val();
                        str = hanKata2zenKata(str);
                        $(this).val(str);
                    });
                    break;
            }
        })
    }
})(jQuery);

/** 半角カタカナ→全角カタカナ* */
function hanKata2zenKata( str ){
    for(i=0; i<=90; i++){
        while(str.indexOf(hanKata[i]) >= 0){
            str = str.replace(hanKata[i], zenKata[i]);
        }
    }
    return str;
}

/* 文字配列作成*/
function init(){
    hanKata = new Array(
        "ｶﾞ", "ｷﾞ", "ｸﾞ", "ｹﾞ", "ｺﾞ", "ｻﾞ", "ｼﾞ", "ｽﾞ", "ｾﾞ", "ｿﾞ",
        "ﾀﾞ", "ﾁﾞ", "ﾂﾞ", "ﾃﾞ", "ﾄﾞ", "ﾊﾞ", "ﾊﾟ", "ﾋﾞ", "ﾋﾟ", "ﾌﾞ",
        "ﾌﾟ", "ﾍﾞ", "ﾍﾟ", "ﾎﾞ", "ﾎﾟ", "ｳﾞ", "ｧ",  "ｱ",  "ｨ",  "ｲ",
        "ｩ",  "ｳ",  "ｪ",  "ｴ",  "ｫ",  "ｵ",  "ｶ",  "ｷ",  "ｸ",  "ｹ",
        "ｺ",  "ｻ",  "ｼ",  "ｽ",  "ｾ",  "ｿ",  "ﾀ",  "ﾁ",  "ｯ",  "ﾂ",
        "ﾃ",  "ﾄ",  "ﾅ",  "ﾆ",  "ﾇ",  "ﾈ",  "ﾉ",  "ﾊ",  "ﾋ",  "ﾌ",
        "ﾍ",  "ﾎ",  "ﾏ",  "ﾐ",  "ﾑ",  "ﾒ",  "ﾓ",  "ｬ",  "ﾔ",  "ｭ",
        "ﾕ",  "ｮ",  "ﾖ",  "ﾗ",  "ﾘ",  "ﾙ",  "ﾚ",  "ﾛ",  "ﾜ",  "ｳｨ",
        "ｳｪ", "ｦ",  "ﾝ",  "ｰ",  "｡",  "｢",  "｣",  "､",  "･",  "ﾞ",
        "ﾟ"
    );

    zenKata = new Array(
        "ガ", "ギ", "グ", "ゲ", "ゴ", "ザ", "ジ", "ズ", "ゼ", "ゾ",
        "ダ", "ヂ", "ヅ", "デ", "ド", "バ", "パ", "ビ", "ピ", "ブ",
        "プ", "ベ", "ペ", "ボ", "ポ", "ヴ", "ァ", "ア", "ィ", "イ",
        "ゥ", "ウ", "ェ", "エ", "ォ", "オ", "カ", "キ", "ク", "ケ",
        "コ", "サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ッ", "ツ",
        "テ", "ト", "ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ",
        "ヘ", "ホ", "マ", "ミ", "ム", "メ", "モ", "ャ", "ヤ", "ュ",
        "ユ", "ョ", "ヨ", "ラ", "リ", "ル", "レ", "ロ", "ワ", "ヰ",
        "ヱ", "ヲ", "ン", "ー", "。", "「", "」", "、", "・", "゛",
        "゜"
    );

}
});

jQuery(function(){
    $(this).tgConvertString();
});

追記

しかし、この方法だとクラス名が複数付与された場合に動かなくなってしまう現象を実務で経験しました。。

参考にさせていただいたページ
http://wataame.sumomo.ne.jp/archives/4550
http://jsdo.it/KABA/4TRz
http://mesosune.blog123.fc2.com/blog-entry-371.html

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。