アラビア数字→漢数字変換(桁付き)する JavaScript

フォームに入力されたアラビア数字に適切な桁を付与して表示する JavaScript を組んで欲しいと依頼されたので作りました。

ついでなので桁付きの漢数字変換も実装しておきました。作りましたと言うよりは一部移植しましたって言う方が正確です。まずもってロジックを考えるのが面倒だと思いました。と同時に思い出しました。(☆ε☆ )

幸い Perl には Lingua::JA::Numbers なんてすばらしいモジュールがあったりします

Lingua::JA::Numbers - Converts numeric values into their Japanese string equivalents and vice versa

Lingua::JA::Numbers は漢数字による演算処理も実装されているのですが、見た目の変換さえできればよい要件だったので、必要な部分のみを抜き取っちゃいました。(*´∀`)アハハン♪

- スポンサーリンク -

まずはサンプルです。金額を半角数字で入力して、適切に桁を挿入する用途です。

アラビア数字に対して4桁毎に桁文字(億とか万とか)を挿入

入力
出力


アラビア数字→漢数字変換して桁文字を挿入

入力
出力

JavaScript のコードはこちらです。あまり深く考えずに移植したので余分なロジックが入っているかもしれません。また新たに追加したのは、Lingua::JA::Numbers だと 1万0500 円とかなってしまうのを 1万500 円と適切に 0 を抜くロジックです。

<script type="text/javascript" >
function num2ja(ein, eout, opt) {
    eout.value = _num2ja(ein.value, opt) + (opt['extension'] || '');
    return eout.value;
}

function _num2ja(num, opt) {
    var sign = {
        '+': '',
        '-': '−'
    };
    var zero = '零';
    var point = '点';
    var zero2nine = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    var ten2thou = ['', '十', '百', '千'];
    var suffices = ['', '万', '億', '兆', '京', '垓', '禾予', '穣', '溝', '澗', '正', '載,', '極', '恒河沙', '阿僧祇', '那由他', '不可思議', '無量大数'];

    num = num.replace(/,/g, '');
    num.match(/([+-])?(\d+)(?:\.(\d+))?/i);
    var sig = RegExp.$1;
    var int = RegExp.$2;
    var fract = RegExp.$3;
    var seisuu = '';
    var shousuu = '';
    var shins = new Array();
    var counter = 0;

    for (var i = int.length; i > 0; i -= 4) {
        shins.push(int.substring(i, i - 4));
    }
    if (shins.length >= 18) {
        return suffices[17];
    }

    var suffix = 0;
    for (var i = 0; i < shins.length; i++) {
        var shin = shins[i];
        if (shin == '0000') {
            suffix++;
            continue;
        }
        var sens = '';
        var keta = 0;
        var digits = shin.split('').reverse();
        for (var j = 0; j < digits.length; j++) {
            var digit = digits[j];

            if (opt['fixed4'] || opt['with_arabic']) {
                if (opt['with_arabic']) {
                    var flg = 0;
                    // 余分な 0 を削除する
                    if (digit == '0') {
                        for (var k = j + 1; k < digits.length; k++) {
                            flg += (digits[k] == '0') ? 0 : 1;
                        }
                        if (flg == 0) digit = '';
                    }
                    sens = digit + sens;
                } else {
                    sens = zero2nine[digit] + sens;
                }
            } else {
                var suuji = (digit == 1 && !opt['p_one'] && keta > 0) ? '' : zero2nine[digit];
                if (digit != 0) sens = suuji + ten2thou[keta] + sens
            }
            keta++;
        }
        seisuu = sens + suffices[suffix++] + seisuu;
    }
    var result = (sign[sig] || '') + seisuu;
    result = result || zero;
    if (fract) {
        result = result + point + fract;
    }
    return result;
}
</script>

使い方は num2ja 関数を呼び出すだけ。たとえば onclick="" などに仕込みます。

num2ja( ソースエレメント, 変換先エレメント, { 変換オプション } )

変換オプション

'with_arabic': 0  →  アラビア数字はアラビア数値のまま出力
'with_arabic': 1  →  アラビア数字を漢数字変換して出力

'fixed4': 0  →  漢数字変換の場合に "0" を変換対象としません。 "2005"→"二千五"
'fixed4': 1  →  漢数字変換の場合に "0" を変換対象とします。 "2005"→"二〇〇五"

'p_one': 0  →  漢数字変換の場合に桁文字前の "1" を削除します。 "1005"→"千五"
'p_one': 1  →  漢数字変換の場合に桁文字前の "1" を "一" と変換します。 "1005"→"一千五"

使い方サンプル。金額を半角数字で入力して、適切に桁を挿入する用途の html コードになります。

<form name="form1">
<fieldset>
<legend>アラビア数字→4桁毎に接尾語(suffix)を入れる</legend>
<p>
入力<input type="text" size="20" name="text1" id="text1" value="123456789" /><br />
出力<input type="text" size="50" name="text2" id="text2" />
<input type="button" name="button1" value="変換" onclick="num2ja(document.form1.text1,document.form1.text2,{'with_arabic':1, 'extension':'円'})" />
</p>
</fieldset>
</form>

<form name="form2">
<fieldset>
<legend>漢数字変換</legend>
<p>
入力<input type="text" size="20" name="text1" id="text1" value="123456789" /><br />
出力<input type="text" size="50" name="text2" id="text2" />
<input type="button" name="button1" value="変換" onclick="num2ja(document.form2.text1,document.form2.text2, {'p_one':1, 'extension':'円'})" />
</p>
</fieldset>
</form>

クラス化していなくて若干使いづらいかもしれませんが、どうぞご自由に組み込んでお使いください。

- スポンサーリンク -

関連する記事&スポンサーリンク