5
3

More than 3 years have passed since last update.

数値を漢字に変換(コンバーター):桁読み

Last updated at Posted at 2021-03-29

数値を漢字に変換(コンバーター)します。

非推奨 IEブラウザ
動作URL https://taoka-toshiaki.com/ketayomi/
github https://github.com/taoka-toshiaki/ketayomi

main.js
document.getElementById("number_text").addEventListener("input", function () {
    let number_text = this.value.replace(/[^0-9]{0,}/g, "").split("").reverse();
    let str = "";
    const kanji = ["", "", "", "", "", "", "", "", "", ""];
    if (parseInt(number_text[(number_text.length - 1)]) !== 0) {
        for (const key in keta.keta) {
            if (number_text[key] !== undefined) {
                number_text[key] = parseInt(number_text[key]);
                let keta_str = keta_fn(parseInt(keta.keta[key].zero));
                let pattern = new RegExp(keta_str,"g");
                if (number_text[key] == 0) {
                        //str = str;
                } else if (number_text[key] == 1) {
                    if(!str.match(pattern)){
                        str = keta.keta[key].name.match(/[十|百|千]/) ? keta.keta[key].name + keta_str + str : kanji[number_text[key]] + keta.keta[key].name + keta_str +str;
                    }else{
                        str = keta.keta[key].name.match(/[十|百|千]/) ? keta.keta[key].name + str  : kanji[number_text[key]] + keta.keta[key].name + str;
                    }
                } else {
                    if(!str.match(pattern)){
                        str = kanji[number_text[key]] + keta.keta[key].name + keta_str + str;
                    }else{
                        str = kanji[number_text[key]] + keta.keta[key].name + str;
                    }
                }
            }
        }
    } else {
        alert("先頭文字に0が付いています");
    }
    document.getElementById("view").innerHTML = str;
});

function keta_fn(key){
    let str ="";
    if(key>=4 && key%4>0){
        str = keta.keta[(parseInt((key/4))*4)].name;
    }
    return str;
}
keta.js
const keta = {
    "keta": [
        {
            "name": "",
            "zero":0
        },      
        {
            "name": "",
            "zero": 1
        },
        {
            "name": "",
            "zero": 2
        },
        {
            "name": "",
            "zero": 3
        },
        {
            "name": "",
            "zero": 4
        },
        {
            "name": "",
            "zero": 5
        },
        {
            "name": "",
            "zero": 6
        },
        {
            "name": "",
            "zero": 7
        },
        {
            "name": "",
            "zero": 8
        },
        {
            "name": "",
            "zero": 9
        },
        {
            "name": "",
            "zero": 10
        },
        {
            "name": "",
            "zero": 11
        },
        {
            "name": "",
            "zero": 12
        },
        {
            "name": "",
            "zero": 13
        },
        {
            "name": "",
            "zero": 14
        },
        {
            "name": "",
            "zero": 15
        },
        {
            "name": "",
            "zero": 16
        },
        {
            "name": "",
            "zero": 17
        },
        {
            "name": "",
            "zero": 18
        },
        {
            "name": "",
            "zero": 19
        },
        {
            "name": "",
            "zero": 20
        },
        {
            "name": "",
            "zero": 21
        },
        {
            "name": "",
            "zero": 22
        },
        {
            "name": "",
            "zero": 23
        },
        {
            "name": "",
            "zero": 24
        },
        {
            "name": "",
            "zero": 25
        },
        {
            "name": "",
            "zero": 26
        },
        {
            "name": "",
            "zero": 27
        },
        {
            "name": "",
            "zero": 28
        },
        {
            "name": "",
            "zero": 29
        },
        {
            "name": "",
            "zero": 30
        },
        {
            "name": "",
            "zero": 31
        },
        {
            "name": "",
            "zero": 32
        },
        {
            "name": "",
            "zero": 33
        },
        {
            "name": "",
            "zero": 34
        },
        {
            "name": "",
            "zero": 35
        },
        {
            "name": "",
            "zero": 36
        },
        {
            "name": "",
            "zero": 37
        },
        {
            "name": "",
            "zero": 38
        },
        {
            "name": "",
            "zero": 39
        },
        {
            "name": "",
            "zero": 40
        },
        {
            "name": "",
            "zero": 41
        },
        {
            "name": "",
            "zero": 42
        },
        {
            "name": "",
            "zero": 43
        },      
        {
            "name": "",
            "zero": 44
        },
        {
            "name": "",
            "zero": 45
        },
        {
            "name": "",
            "zero": 46
        },
        {
            "name": "",
            "zero": 47
        },
        {
            "name": "",
            "zero": 48
        },
        {
            "name": "",
            "zero": 49
        },
        {
            "name": "",
            "zero": 50
        },
        {
            "name": "",
            "zero": 51
        },      
        {
            "name": "恒河沙",
            "zero": 52
        },
        {
            "name": "",
            "zero": 53
        },
        {
            "name": "",
            "zero": 54
        },
        {
            "name": "",
            "zero": 55
        },

        {
            "name": "阿僧祇",
            "zero": 56
        },
        {
            "name": "",
            "zero": 57
        },
        {
            "name": "",
            "zero": 58
        },
        {
            "name": "",
            "zero": 59
        },
        {
            "name": "那由多",
            "zero": 60
        },
        {
            "name": "",
            "zero": 61
        },
        {
            "name": "",
            "zero": 62
        },
        {
            "name": "",
            "zero": 63
        },
        {
            "name": "不可思議",
            "zero": 64
        },
        {
            "name": "",
            "zero": 65
        },
        {
            "name": "",
            "zero": 66
        },
        {
            "name": "",
            "zero": 67
        },
        {
            "name": "無量大数",
            "zero": 68
        },
        {
            "name": "",
            "zero": 69
        },
        {
            "name": "",
            "zero": 70
        },
        {
            "name": "",
            "zero": 71
        }       
    ]
};
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>桁読みJS</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48347814-1"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12">
            数値を入力ください
            <input class="form-control" type="text" name="text" id="number_text">
        </div>
        <div class="col-12">
            <p id="view"></p>
        </div>
    </div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="./assets/js/keta.js?<?=time()?>"></script>
<script src="./assets/js/main.js?<?=time()?>"></script>
</body>
</html>
5
3
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3