JSFiddle - React, Tailwind, and code Playground

by Matsunaga_Ajike

HTML

<p>数値を入力してください。</p>
<input type="text" id="js-numericValue" class="numeric-value" value="" />

CSS

.numeric-value {
	font: 20px sans-serif;
	padding: 12px;
	border: 1px solid #000000;
	border-radius: 3px;
}

JavaScript

$(function() {
    var priceCommaData    = '';
    var priceNonCommaData = '';

    /**
     * フォーカス
     */
    $('#js-numericValue').on('focus', function() {
        priceCommaData    = $(this).val(); // 入力値取得
        priceNonCommaData = removeComma(priceCommaData); // カンマ削除

        $(this).val(priceNonCommaData);　// 反映
    });


    /**
     * フォーカスアウト
     */
    $('#js-numericValue').on('blur', function() {
        priceNonCommaData = $(this).val(); // 入力値取得
        priceCommaData    = addComma(priceNonCommaData); // カンマ付与

        $(this).val(priceCommaData);　// 反映
    });


    /**
     * カンマの追加
     */
    function addComma(priceNonCommaData) {
        var priceCommaData = '';

        /**
         * 正規表現
         * \d        => 半角数字
         * \d{3}     => 3桁の半角数字
         * ?=(\d{3}) => \dの後ろに\d{3}がある
         * +(?!\d)   => \d{3}の後ろに\dがない
         * g         => マッチしたべての部分文字列を置換
         * $1        => 変数
         *           => カッコ()で囲われた部分を$1に代入
         * 
         * 1234の場合の$1 => 1
         * 1234の場合の$2 => 234
         * https://regexr.com/
         */   
        priceCommaData = priceNonCommaData.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');

        // 小数点以下のカンマを削除
        if (priceCommaData.search(/\./) !== -1) { // 小数点が含まれている場合
            priceCommaData = removeFloatComma(priceCommaData);
        }

        return priceCommaData;
    }

    /**
     * カンマの削除
     */
    function removeComma(priceCommaData) {
        var priceNonCommaData = '';
        priceNonCommaData = priceCommaData.replace(/,/g, ''); // 入力時のカンマを削除
        return priceNonCommaData;
    }

    /**
     * 小数点以下のカンマの削除
     */
    function removeFloatComma(priceCommaData) {
        var priceDotBefore = '';
        var priceDotAfter  = '';

        // 小数点までを取得
        priceDotBefore = priceCommaData.match(/(.*)\./);
        priceDotBefore = priceDotBefore[0];
        priceDotBefore = priceDotBefore.replace(/\./g, '')

        // 小数点以降を取得
        priceDotAfter =...