あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2015年1月28日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

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

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

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

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

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

■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

スポンサーリンク