Format angka dengan javascript

Bismillaahirrohmaanirrohiim…

Berikut ini cara format angka menggunakan javascript, misalkan 1000 menjadi 1.000 atau 1500000 menjadi 1.500.000

– Cara Standar

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

// Contoh penggunaan
console.log(formatAngka(1000));      // Output: 1.000
console.log(formatAngka(12000000));  // Output: 12.000.000

– format standar yang dapat menangani desimal

function formatAngka(angka) {
    // Handle angka desimal
    if (typeof angka !== 'number') {
        angka = parseFloat(angka);
    }
    
    // Handle NaN
    if (isNaN(angka)) {
        return '0';
    }
    
    // Pisahkan bagian desimal jika ada
    var parts = angka.toString().split('.');
    var bilanganBulat = parts[0];
    var bilanganDesimal = parts.length > 1 ? ',' + parts[1] : '';
    
    // Format bilangan bulat dengan titik
    var formatted = bilanganBulat.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    
    return formatted + bilanganDesimal;
}

// Contoh penggunaan
console.log(formatAngka(1000));          // 1.000
console.log(formatAngka(12000000));      // 12.000.000
console.log(formatAngka(1234567.89));    // 1.234.567,89
console.log(formatAngka('500000'));      // 500.000

– dengan parameter pemisah ribuan dan desimal

function formatAngka(angka, pemisahRibuan = '.', pemisahDesimal = ',') {
    // Konversi ke number
    angka = parseFloat(angka);
    
    if (isNaN(angka)) {
        return '0';
    }
    
    // Format angka dengan 2 digit desimal
    var parts = angka.toFixed(2).split('.');
    var bilanganBulat = parts[0];
    var bilanganDesimal = parts[1] ? pemisahDesimal + parts[1] : '';
    
    // Format ribuan
    var formatted = bilanganBulat.replace(/\B(?=(\d{3})+(?!\d))/g, pemisahRibuan);
    
    return formatted + bilanganDesimal;
}

// Contoh penggunaan
console.log(formatAngka(1000));          // 1.000,00
console.log(formatAngka(12000000));      // 12.000.000,00
console.log(formatAngka(1234567.89));    // 1.234.567,89

– untuk format saat input secara realtime

// Format input angka secara real-time
function formatInputAngka(inputElement) {
    inputElement.addEventListener('input', function(e) {
        // Hapus semua karakter non-digit kecuali koma
        var value = this.value.replace(/[^\d,]/g, '');
        
        // Pisahkan bagian desimal
        var parts = value.split(',');
        var bilanganBulat = parts[0];
        var bilanganDesimal = parts.length > 1 ? ',' + parts[1] : '';
        
        // Format bilangan bulat
        var formatted = bilanganBulat.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        
        this.value = formatted + bilanganDesimal;
    });
}

// Contoh penggunaan
// formatInputAngka(document.getElementById('inputHarga'));

– fungsi reverse, dari format menjadi angka kembali

function unformatAngka(formattedString) {
    // Hapus semua titik dan ganti koma dengan titik untuk desimal
    var unformatted = formattedString.replace(/\./g, '').replace(/,/g, '.');
    return parseFloat(unformatted);
}

// Contoh penggunaan
console.log(unformatAngka('1.000'));         // 1000
console.log(unformatAngka('12.000.000'));    // 12000000
console.log(unformatAngka('1.234.567,89'));  // 1234567.89

– contoh penggunaan dalam HTML

<input type="text" id="inputHarga" onblur="formatInput(this)">
<span id="displayHarga"></span>

<script>
function formatInput(input) {
    var value = input.value.replace(/\./g, '');
    if (!isNaN(value)) {
        input.value = formatAngka(parseFloat(value));
        document.getElementById('displayHarga').textContent = formatAngka(parseFloat(value));
    }
}
</script>

Demikian semoga bermanfaat