機種依存文字や半角カナを変換する jQuery プラグインを書いてみた

以下のような丸囲い数字や半角カナを、他の文字に変換する jQuery プラグインを書いてみました。

フォーム要素などでこれらの値が入力されるケースが良くあるのですが、環境によっては文字化けやトラブルの要因になるので、登録処理を行う前に代替の文字に強制変換するといった使い方をしています。

使い方

jquery.js 、jquery.exreplace.js を読み込み、変換対象の要素に対し exReplace() メソッドを実行すると、表のとおりの変換処理を行います。パラメータを指定することで、変換対象の文字を限定することができます。

Demo

保存ボタンを押した時点で変換したい場合は、保存ボタンの click イベント内で exReplace() メソッドを実行します。

jQuery(function($){
    $('#save_btn').click(function(){
        $('input,textarea').exReplace();
    });
});

Demo

入力フィールドに値が入力され、カーソルがその要素から外れた時点で変換するには、入力フィールドの blur イベント内で exReplace() メソッドを実行します。

jQuery(function($){
    $('input,textarea').blur(function(){
        $(this).exReplace();
    });
});

Demo

変換対象の文字を限定するには、datName パラメータに上記表のパラメータ名を指定します。パラメータを複数指定する場合はスペースで区切ります。

$('input,textarea').exReplace({
    datName : 'maru rome'   //丸囲い数字とローマ数字のみ変換されます
});

addDat パラメータには独自の変換ルールを指定することができます。例えば、半角数字を全角にするには以下のように記述します。

$('input,textarea').exReplace({
    addDat : {
        from : ['0','1','2','3','4','5','6','7','8','9'],   //変換前
        to : ['0','1','2','3','4','5','6','7','8','9']    //変換後
    }
});

独自の変換ルールをプラグインのデフォルト値として定義することもできます。

$.extend($.ex.replace.dat,{
    num_to_zen : {  //←適当なパラメータ名
        from : ['0','1','2','3','4','5','6','7','8','9'],   //変換前
        to : ['0','1','2','3','4','5','6','7','8','9']    //変換後
    }
});
//...
$('input,textarea').exReplace({
    datName : 'num_to_zen'
});

任意の文字列を変換対象にしたい場合は、関数 API を使用します。第1引数に文字列、第2引数にパラメータを指定します。

var result = $.ex.replace('アイウエオ');
alert(result); //アイウエオ

注意点

HTML ページの文字コードUTF-8 以外の場合は、プラグインの読み込みの際、charset に UTF-8 を指定するようにしてください。

<script src="jquery.exreplace.js" charset="UTF-8"></script>

ダウンロード

こちらからどうぞ。