ファイルの読み込み

<script src="js/stringFilter.js"></script>

独自フィルターの追加

// 追加したいフィルターオブジェクト
var filter = {
    a: function(str){
        // 引数「str」は自動で付与される変換する文字列
        // ここに「str」に対するフィルタリング処理

        // 「return str;」は必須
        return str;
    },
    b: function(str, c, d){
        // 引数「str」は自動で付与される変換する文字列
        // 引数を取りたい時は「str」以降に記述
        // ここに「str」に対するフィルタリング処理

        // 「return str;」は必須
        return str;
    }
};

// フィルターを追加
String.prototype._f('addFilter', filter);

文字列にフィルターの適用（単独版・引数なし）

文字列にフィルターの適用（単独版・引数あり）

文字列にフィルターの適用（複数版・引数なし）

文字列にフィルターの適用（複数版・引数あり）

IME入力確定時・IMEがOFFの時にキー入力でイベントが発火する 「jQuery.imeEnter」と 組み合わせて使用してみます。

/**
 * HTML部分
 */

// 小数点以下なしで桁区切りにフォーマット
<label>金額入力</label>
<input type="text" class="form-control price" data-filter='[["numString", 0, true]]'>

// 半角・全角カタカナをひらがなに変換。ひらがなとスペース・長音符・半角ハイフン・半角数字のみを入力可
<label>ふりがな</label>
<input type="text" class="form-control" data-filter='["hankana2zenkana", "kana2hira", "hiragana"]'>

// 半角カタカナを全角カタカナに変換。記号は半角に（チルダは何もしない）
<label>住所等</label>
<input type="text" class="form-control" data-filter='["hankana2zenkana", ["zen2han", false]]'>
                            

/**
 * JavaScript部分
 */

// IME入力確認の初期化
$('input[data-filter]').imeEnter();

// フォーカスを受けたとき・外れたときでIME入力確認のON・OFFを行う
// IME入力確定時・IMEがOFFの時にキー入力で発火するイベントの「enter.imeEnter」で入力のフィルタリングを行う
$(document).on('focus blur enter.imeEnter', 'input[data-filter]', function (event) {
    switch (event.type) {
        case 'focus':
            // フォーカスを受けたときに入力状態の確認を有効化
            $(this).imeEnter('on');
            break;
        case 'blur':
            // フォーカスが外れたときに入力状態の確認を無効化
            $(this).imeEnter('off');
            break;
        case 'enter':
            // IME確定時・IMEがOFFの時のキー入力時にフィルタリングの実行

            // キャレットの位置取得
            var caret = this.selectionEnd;

            // フィルターの取得
            var filter = $(this).data('filter');
            // 現在の文字列の取得
            var str = $(this).val();
            // 文字列の置換え
            var ret = str._f(filter);
            if ($(this).hasClass('price')) {
                // 金額の入力欄の時は「円」を足す
                ret += '円';
            }
            // 値のセット
            $(this).val(ret);

            // 変換後の文字列との差分からキャレット位置の変更
            caret += ret.length - str.length;

            // 金額の入力欄の時は「円」を足しているので調整
            if ($(this).hasClass('price') && caret === ret.length) {
                // キャレットの位置が最後尾の場合「円」の後ろにあるのでキャレット位置を変更する
                caret -= 1;
            }
            this.selectionStart = caret;
            this.selectionEnd = caret;
            break;
    }
});

// 「enter」を発行してinputの中の文字列を初期化しておく
$('input[data-filter]').trigger($.Event('enter'));