✨安い！！お得！！激安JS！！✨

gekiyasu.js

//==================================================//
// 参考
//     http://qiita.com/shiozaki/items/0e42e101b7483df13c8f
//
// 使い方
//     <span class="gekiyasu">19800</span>
//     <script src="gekiyasu.js"></script>
//     <script>
//         gekiyasu.initialize();
//     </script>
//==================================================//
((exports) => {

    if (document.querySelector('.gekiyasu-css') === null) {
        let style = document.createElement('style');
        style.textContent = `
            @import url(https://fonts.googleapis.com/css?family=Poppins:700);

            .gekiyasu {
                color: #c70506;
                text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5);
                font-weight: bold;
                font-family: Poppins;
                letter-spacing: -3px;
            }
            .gekiyasu .gekiyasu-price1 {
                font-size: 78px;
                margin-right: -5px;
                font-style: italic;
            }
            .gekiyasu .gekiyasu-price2 {
                font-size: 59px;
                margin-right: 10px;
                font-style: italic;
            }
            .gekiyasu .gekiyasu-yen {
                font-size: 40px;
            }
        `;
        style.classList.add('gekiyasu-css');
        document.querySelector('head').appendChild(style);
    }

    exports.gekiyasu = {};
    exports.gekiyasu.initialize = (selector) => {
        selector = selector || '.gekiyasu';
        Array.prototype.forEach.call(document.querySelectorAll(selector), (element) => {
            let value = element.textContent;
            value = value.replace(/(\d)(?=(\d{3})+$)/g, '$1,').split(',');

            element.textContent = '';
            element.classList.add('gekiyasu');

            if (value.length >= 2) {
                let price1 = document.createElement('span');
                price1.textContent = value.shift();
                price1.classList.add('gekiyasu-price1');
                element.appendChild(price1);

                value.unshift('');
            }

            let price2 = document.createElement('span');
            price2.textContent = value.join(',');
            price2.classList.add('gekiyasu-price2');
            element.appendChild(price2);

            let yen = document.createElement('span');
            yen.textContent = '円';
            yen.classList.add('gekiyasu-yen');
            element.appendChild(yen);
        });
    };
})(window);