<h2>숫자 입력 사용성</h2>
<label for="numberInput">금액 입력:</label>
<input type="number" id="numberInput" value="150100" style="text-align: right" oninput="updateNumberDisplays()" step="100" onclick="this.select()">원
<p>한국어로 변환된 숫자: <b id="koreanOutput"></b></p>
<p>쉼표가 찍힌 숫자: <b id="commaOutput"></b></p>
function updateNumberDisplays() {
    var number = document.getElementById("numberInput").value;
    var koreanNumber = convertNumberToKoreanText(number);
    document.getElementById("koreanOutput").innerText = koreanNumber + "원";
    document.getElementById("commaOutput").innerText = formatNumberWithCommas(number) + "원";
}

function convertNumberToKoreanText(number) {
    const units = ['','만','억','조','경'];
    let unit = 10000;
    let result = '';
    let unitIndex = 0;

    if(number == 0) return '영';

    while(number > 0) {
        let temp = number % unit;
        if(temp > 0) {
            let unitName = units[unitIndex];
            result = temp + unitName + " " + result;
        }
        number = Math.floor(number / unit);
        unitIndex++;
    }

    return result.trim();
}

function formatNumberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

updateNumberDisplays();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.