概要

テキストボックスのchangeイベントにひっかけ、入力を自動で変換するAngularJSディレクティブです。

インストール方法

% npm install angular-convert-jp --save

使い方

モジュールの使用を宣言する。

angular.module('myApp', ['convertJp']);

自動変換したい入力欄にディレクティブを付ける。

<input type="text" ng-model="myvalue" convert-jp>

高度な使い方

半角カナ→全角カナのみ変換する。

<input type="text" ng-model="myvalue" convert-jp="K">

全角英数→半角英数のみ変換する。

<input type="text" ng-model="myvalue" convert-jp="a">

ソースコード

angular-convertJp.js

(function (angular) {
    'use strict';
    
     var halfKana = [/\uff76\uff9e/g, /\uff77\uff9e/g, /\uff78\uff9e/g, /\uff79\uff9e/g, /\uff7a\uff9e/g, /\uff7b\uff9e/g, /\uff7c\uff9e/g, /\uff7d\uff9e/g, /\uff7e\uff9e/g, /\uff7f\uff9e/g, /\uff80\uff9e/g, /\uff81\uff9e/g, /\uff82\uff9e/g, /\uff83\uff9e/g, /\uff84\uff9e/g, /\uff8a\uff9e/g, /\uff8a\uff9f/g, /\uff8b\uff9e/g, /\uff8b\uff9f/g, /\uff8c\uff9e/g, /\uff8c\uff9f/g, /\uff8d\uff9e/g, /\uff8d\uff9f/g, /\uff8e\uff9e/g, /\uff8e\uff9f/g, /\uff73\uff9e/g, /\uff67/g, /\uff71/g, /\uff68/g, /\uff72/g, /\uff69/g, /\uff73/g, /\uff6a/g, /\uff74/g, /\uff6b/g, /\uff75/g, /\uff76/g, /\uff77/g, /\uff78/g, /\uff79/g, /\uff7a/g, /\uff7b/g, /\uff7c/g, /\uff7d/g, /\uff7e/g, /\uff7f/g, /\uff80/g, /\uff81/g, /\uff6f/g, /\uff82/g, /\uff83/g, /\uff84/g, /\uff85/g, /\uff86/g, /\uff87/g, /\uff88/g, /\uff89/g, /\uff8a/g, /\uff8b/g, /\uff8c/g, /\uff8d/g, /\uff8e/g, /\uff8f/g, /\uff90/g, /\uff91/g, /\uff92/g, /\uff93/g, /\uff6c/g, /\uff94/g, /\uff6d/g, /\uff95/g, /\uff6e/g, /\uff96/g, /\uff97/g, /\uff98/g, /\uff99/g, /\uff9a/g, /\uff9b/g, /\uff9c/g, /\uff66/g, /\uff9d/g, /\uff61/g, /\uff62/g, /\uff63/g, /\uff64/g, /\uff65/g, /\uff70/g, /\uff9e/g, /\uff9f/g];
     var fullKana = ['\u30ac', '\u30ae', '\u30b0', '\u30b2', '\u30b4', '\u30b6', '\u30b8', '\u30ba', '\u30bc', '\u30be', '\u30c0', '\u30c2', '\u30c5', '\u30c7', '\u30c9', '\u30d0', '\u30d1', '\u30d3', '\u30d4', '\u30d6', '\u30d7', '\u30d9', '\u30da', '\u30dc', '\u30dd', '\u30f4', '\u30a1', '\u30a2', '\u30a3', '\u30a4', '\u30a5', '\u30a6', '\u30a7', '\u30a8', '\u30a9', '\u30aa', '\u30ab', '\u30ad', '\u30af', '\u30b1', '\u30b3', '\u30b5', '\u30b7', '\u30b9', '\u30bb', '\u30bd', '\u30bf', '\u30c1', '\u30c3', '\u30c4', '\u30c6', '\u30c8', '\u30ca', '\u30cb', '\u30cc', '\u30cd', '\u30ce', '\u30cf', '\u30d2', '\u30d5', '\u30d8', '\u30db', '\u30de', '\u30df', '\u30e0', '\u30e1', '\u30e2', '\u30e3', '\u30e4', '\u30e5', '\u30e6', '\u30e7', '\u30e8', '\u30e9', '\u30ea', '\u30eb', '\u30ec', '\u30ed', '\u30ef', '\u30f2', '\u30f3', '\u3002', '\u300c', '\u300d', '\u3001', '\u30fb', '\u30fc', '\u309b', '\u309c'];
     

    /* 
     * @type type      
     * Convert functions
     * @type type
     */
    var convertFuncs = {
        /**
         * Convert Half-width Kana to Full-width
         * 
         * @param {type} word
         * @returns {undefined}
         */
        K: function (word) {
            var max = halfKana.length;
            for (var i = 0; i < max; i++) {
                word = word.replace(halfKana[i], fullKana[i]);
            }

            return word;
        },
        /**
         * Convert Full-width alphabet to Half-width
         * 
         * @param {type} word
         * @returns {undefined}
         */
        a: function (word) {
            return word.replace(/[\uff10-\uff19\uff21-\uff3a\uff41-\uff5a]/g, function (s) {
                return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
            });
        }
    };

    var convert = function (word, option) {
        var max = option.length;
        for (var i = 0; i < max; i++) {
            word = convertFuncs[option.charAt(i)](word);
        }
        return word;
    };
    
    /**
     * Convert Japanese characters to another style character.
     * 
     */
    angular.module('convertJp', []).directive('convertJp', [
        function () {

            return {
                strict: 'A',
                require: '?ngModel',
                link: function (scope, element, attributes, ngModel) {
                    var option = attributes['convertJp'] || 'Ka';

                    element.bind('change', function () {
                        var word = convert(element.val(), option);
                        
                        element.val(word);

                        if (ngModel) {
                            scope.$apply(function() {
                                ngModel.$setViewValue(word);
                            });
                        }

                    });
                }
            };
        }
    ]);
})(window.angular);

将来の夢（今できてないこと）

phpのmb_convert_kanaみたく、他の文字種も変換できるようにしたい。

濁点、半濁点へ対応したい。

bowerとkarmaへ対応したい。

2016年12月追記 karmaへ対応して、npmレポジトリへ公開しました。 https://www.npmjs.com/package/angular-convert-jp

参考

こちらの記事を参考にしました。