jQuery: Währungsformatnummer

Lesezeit: 10 Minuten

Benutzer-Avatar
GusDeCool

Ich habe eine solche Nummer in meinem HTML

<div class="number">950000</div>

und ich möchte, dass jQuery es ändert

<div class="number">Rp. 950.000</div>

Wie kann ich das in jQUEry machen?

  • Haben Sie die Möglichkeit, dies serverseitig zu formatieren?

    – Richard Ev

    27. April 2011 um 16:17 Uhr

  • @richard in einigen Fällen möchte ich dies in jQuery/JavaScript tun 🙂

    – GusDeCool

    27. April 2011 um 16:27 Uhr

  • developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

    – zloctb

    28. November 2015 um 9:16 Uhr

  • @zloctb Vielen Dank, dass Sie Ihre Antwort Jahre später hier gepostet haben. Das hat mir SEHR geholfen!! Die einzige Lösung, die wirklich Sinn macht, Und es ist jetzt sooo einfach.

    – JonSchnee

    15. April 2019 um 11:01 Uhr

Benutzer-Avatar
Spudley

Teilen Sie durch 1000 und verwenden Sie .toFixed(3) um die Anzahl der Dezimalstellen festzulegen.

var output = (input/1000).toFixed(3);

[EDIT]

Die obige Lösung gilt nur, wenn der Punkt in der ursprünglichen Frage für ein Dezimalkomma steht. Der Kommentar des OP unten impliziert jedoch, dass es sich um ein Tausendertrennzeichen handelt.

In diesem Fall gibt es keine einzeilige Lösung (Javascript hat sie nicht eingebaut), aber es kann mit einer ziemlich kurzen Funktion erreicht werden.

Ein gutes Beispiel finden Sie hier: http://www.mredkj.com/javascript/numberFormat.html#addcommas

Alternativ eine komplexere Zeichenfolgenformatierungsfunktion, die die nachahmt printf() Funktion aus der C-Sprache finden Sie hier: http://www.diveintojavascript.com/projects/javascript-sprintf

  • Was passiert, wenn ich später eine solche Nummer habe? 5550000000 funktioniert das richtig?

    – GusDeCool

    27. April 2011 um 16:15 Uhr

  • Ich denke, ich hätte fragen sollen, ob der Punkt ein Dezimalpunkt oder ein Tausendertrennzeichen ist. Diese Antwort gilt nur, wenn es sich um einen Dezimalpunkt handelt.

    – Spudley

    27. April 2011 um 16:18 Uhr

  • @GusDe – Ich habe meine Antwort bearbeitet, um eine Lösung für beide Fälle zu geben.

    – Spudley

    27. April 2011 um 16:22 Uhr

  • Danke Spudley, das ist wirklich eine Hilfe 🙂

    – GusDeCool

    27. April 2011 um 16:25 Uhr

Hier ist der coole Regex-Stil für die Zifferngruppierung:

thenumber.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");

  • Ich habe dies verwendet, um meine Währung mit Kommas anstelle von Punkten zu formatieren.

    – Andrew Tibbets

    16. Februar 2016 um 17:55 Uhr

  • @Mowd Sie können den Punkt ersetzen "$1." mit ,

    – Ihsan

    23. Januar 2017 um 12:40 Uhr

  • Da diese Seite angezeigt wird, wenn ich diese Frage suche (und es wird sicher wieder vorkommen), bekomme ich in meiner Zahl sowohl Dezimalstellen als auch Kommas: thenumber.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");

    – AWP

    17. Februar 2021 um 20:53 Uhr


Dafür gibt es ein Plugin jquery-formatcurrency.

Sie können das Dezimaltrennzeichen festlegen (default .) und Währungssymbol (Standard $) für benutzerdefinierte Formatierung oder verwenden Sie die integrierte Internationale Unterstützung. Das Format für Bahasa Indonesia (Indonesia) – Indonesisch (Indonesia) codierte ID-ID entspricht am ehesten dem, was Sie angegeben haben.

  • Ich vermeide die Verwendung von Plugins, da ich nur eine einfache Methode brauche und die Logik wissen möchte, wie das in jQuery geht 🙂

    – GusDeCool

    27. April 2011 um 16:13 Uhr

  • @GusDe Cool – wenn Sie kein Plugin verwenden möchten, dann ist eine Kombination aus Spudleys Antwort zum Teilen und Verwenden von toFixed und Praneeths Antwort zum Anhängen von ‘Rp. ‘ sollte dich einrichten.

    – justkt

    27. April 2011 um 16:15 Uhr

  • Dieses Plugin hat einen Fehler. Gibt einen falschen Wert zurück, wenn der Wert länger als 15 ist

    – Jon P

    20. Februar 2013 um 6:43 Uhr

Auf diese Weise können Sie Ihren Währungsbedarf formatieren.

var xx = new Intl.NumberFormat(‘en-US’, {
  style: ‘currency’,
  currency: ‘USD’,
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
xx.format(123456.789); // ‘$123,456.79’

Für weitere Informationen können Sie auf diesen Link zugreifen.

https://www.justinmccandless.com/post/formatting-currency-in-javascript/

var input=950000; 
var output=parseInt(input).toLocaleString(); 
alert(output);

Benutzer-Avatar
ChrisThompson

$(document).ready(function() {
    var num = $('div.number').text()
    num = addPeriod(num);
    $('div.number').text('Rp. '+num)
});

function addPeriod(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}

Benutzer-Avatar
Dinesh Lomte

Bitte finden Sie im folgenden Code, was ich entwickelt habe, um die Internationalisierung zu unterstützen. Es formatiert den gegebenen numerischen Wert in ein sprachspezifisches Format. In dem gegebenen Beispiel habe ich verwendet ‘de’ während getestet haben ‘es’, ‘fr’ und andere Länder, in denen das Format variiert. Es hindert den Benutzer nicht nur daran, Zeichen einzugeben, sondern formatiert den Wert auf der Tabulatortaste. Habe Komponenten erstellt für Nummer sowie für Dezimal Format. Abgesehen davon haben erstellt parseNumber(Wert, Gebietsschema) und parseDecimal(Wert, Gebietsschema) Funktionen, die die formatierten Daten für andere Geschäftszwecke parsen. Die genannte Funktion akzeptiert die formatierten Daten und gibt den nicht formatierten Wert zurück. Ich habe das JQuery-Validator-Plugin im unten stehenden freigegebenen Code verwendet.

HTML:

<tr>
                            <td>
                                <label class="control-label">
                                    Number Field:
                                </label>
                                <div class="inner-addon right-addon">                                        
                                    <input type="text" id="numberField" 
                                           name="numberField"
                                           class="form-control"
                                           autocomplete="off"
                                           maxlength="17"
                                           data-rule-required="true"
                                           data-msg-required="Cannot be blank."
                                           data-msg-maxlength="Exceeding the maximum limit of 13 digits. Example: 1234567890123"
                                           data-rule-numberExceedsMaxLimit="en"
                                           data-msg-numberExceedsMaxLimit="Exceeding the maximum limit of 13 digits. Example: 1234567890123"
                                           onkeydown="return isNumber(event, 'en')"
                                           onkeyup="return updateField(this)"
                                           onblur="numberFormatter(this,                                                           
                                                       'en', 
                                                       'Invalid character(s) found. Please enter valid characters.')">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="control-label">
                                    Decimal Field:
                                </label>
                                <div class="inner-addon right-addon">                                        
                                    <input type="text" id="decimalField" 
                                           name="decimalField"
                                           class="form-control"
                                           autocomplete="off"
                                           maxlength="20"
                                           data-rule-required="true"
                                           data-msg-required="Cannot be blank."
                                           data-msg-maxlength="Exceeding the maximum limit of 16 digits. Example: 1234567890123.00"
                                           data-rule-decimalExceedsMaxLimit="en"
                                           data-msg-decimalExceedsMaxLimit="Exceeding the maximum limit of 16 digits. Example: 1234567890123.00"
                                           onkeydown="return isDecimal(event, 'en')"
                                           onkeyup="return updateField(this)"
                                           onblur="decimalFormatter(this,
                                               'en', 
                                               'Invalid character(s) found. Please enter valid characters.')">
                                </div>
                            </td>
                        </tr>

Javascript:

            /* 
     * @author: dinesh.lomte
     */
    /* Holds the maximum limit of digits to be entered in number field. */
    var numericMaxLimit = 13;
    /* Holds the maximum limit of digits to be entered in decimal field. */
    var decimalMaxLimit = 16;

    /**
     * 
     * @param {type} value
     * @param {type} locale
     * @returns {Boolean}
     */
    parseDecimal = function(value, locale) {

        value = value.trim();
        if (isNull(value)) {
            return 0.00;
        }
        if (isNull(locale)) {
            return value;
        }
        if (getNumberFormat(locale)[0] === '.') {
            value = value.replace(/\./g, '');
        } else {
            value = value.replace(
                    new RegExp(getNumberFormat(locale)[0], 'g'), '');
        }
        if (getNumberFormat(locale)[1] === ',') {
            value = value.replace(
                    new RegExp(getNumberFormat(locale)[1], 'g'), '.');
        }
        return value;
    };

    /**
     * 
     * @param {type} element
     * @param {type} locale
     * @param {type} nanMessage
     * @returns {Boolean}
     */
    decimalFormatter = function (element, locale, nanMessage) {

        showErrorMessage(element.id, false, null);
        if (isNull(element.id) || isNull(element.value) || isNull(locale)) {
            return true;
        }
        var value = element.value.trim();
        value = value.replace(/\s/g, '');
        value = parseDecimal(value, locale);
        var numberFormatObj = new Intl.NumberFormat(locale,
                {   minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
        );
        if (numberFormatObj.format(value) === 'NaN') {
            showErrorMessage(element.id, true, nanMessage);
            setFocus(element.id);
            return false;
        }
        element.value =
                numberFormatObj.format(value);
        return true;
    };

    /**
     * 
     * @param {type} element
     * @param {type} locale
     * @param {type} nanMessage
     * @returns {Boolean}
     */
    numberFormatter = function (element, locale, nanMessage) {

        showErrorMessage(element.id, false, null);
        if (isNull(element.id) || isNull(element.value) || isNull(locale)) {
            return true;
        }
        var value = element.value.trim();    
        var format = getNumberFormat(locale);
        if (hasDecimal(value, format[1])) {
            showErrorMessage(element.id, true, nanMessage);
            setFocus(element.id);
            return false;
        }
        value = value.replace(/\s/g, '');
        value = parseNumber(value, locale);
        var numberFormatObj = new Intl.NumberFormat(locale,
                {   minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }
        );
        if (numberFormatObj.format(value) === 'NaN') {
            showErrorMessage(element.id, true, nanMessage);
            setFocus(element.id);
            return false;
        }
        element.value =
                numberFormatObj.format(value);
        return true;
    };

    /**
     * 
     * @param {type} id
     * @param {type} flag
     * @param {type} message
     * @returns {undefined}
     */
    showErrorMessage = function(id, flag, message) {

        if (flag) {
            // only add if not added
            if ($('#'+id).parent().next('.app-error-message').length === 0) {
                var errorTag = '<div class=\'app-error-message\'>' + message + '</div>';
                $('#'+id).parent().after(errorTag);
            }
        } else {
            // remove it
            $('#'+id).parent().next(".app-error-message").remove(); 
        }
    };

    /**
     * 
     * @param {type} id             
     * @returns
     */
    setFocus = function(id) {

        id = id.trim();
        if (isNull(id)) {
            return;
        }
        setTimeout(function() {
            document.getElementById(id).focus();
        }, 10);
    };

    /**
     * 
     * @param {type} value
     * @param {type} locale
     * @returns {Array}
     */
    parseNumber = function(value, locale) {

        value = value.trim();
        if (isNull(value)) {
            return 0;
        }    
        if (isNull(locale)) {
            return value;
        }
        if (getNumberFormat(locale)[0] === '.') {
            return value.replace(/\./g, '');
        }
        return value.replace(
                new RegExp(getNumberFormat(locale)[0], 'g'), '');
    };

    /**
     * 
     * @param {type} locale
     * @returns {Array}
     */
    getNumberFormat = function(locale) {

        var format = [];
        var numberFormatObj = new Intl.NumberFormat(locale,
                {   minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }
        );
        var value = numberFormatObj.format('132617.07');
        format[0] = value.charAt(3);
        format[1] = value.charAt(7);
        return format;
    };

    /**
     * 
     * @param {type} value
     * @param {type} fractionFormat
     * @returns {Boolean}
     */
    hasDecimal = function(value, fractionFormat) {

        value = value.trim();
        if (isNull(value) || isNull(fractionFormat)) {
            return false;
        }
        if (value.indexOf(fractionFormat) >= 1) {
            return true;
        }
    };

    /**
     * 
     * @param {type} event
     * @param {type} locale
     * @returns {Boolean}
     */
    isNumber = function(event, locale) {

        var keyCode = event.which ? event.which : event.keyCode;
        // Validating if user has pressed shift character
        if (keyCode === 16) {
            return false;
        }
        if (isNumberKey(keyCode)) {        
            return true;
        }
        var numberFormatter = [32, 110, 188, 190];
        if (keyCode === 32
                && isNull(getNumberFormat(locale)[0]) === isNull(getFormat(keyCode))) {
            return true;
        }
        if (numberFormatter.indexOf(keyCode) >= 0
                && getNumberFormat(locale)[0] === getFormat(keyCode)) {        
            return true;
        }    
        return false;
    };

    /**
     * 
     * @param {type} event
     * @param {type} locale
     * @returns {Boolean}
     */
    isDecimal = function(event, locale) {

        var keyCode = event.which ? event.which : event.keyCode;
        // Validating if user has pressed shift character
        if (keyCode === 16) {
            return false;
        }
        if (isNumberKey(keyCode)) {
            return true;
        }
        var numberFormatter = [32, 110, 188, 190];
        if (keyCode === 32
                && isNull(getNumberFormat(locale)[0]) === isNull(getFormat(keyCode))) {
            return true;
        }
        if (numberFormatter.indexOf(keyCode) >= 0
                && (getNumberFormat(locale)[0] === getFormat(keyCode)
                    || getNumberFormat(locale)[1] === getFormat(keyCode))) {
            return true;
        }
        return false;
    };

    /**
     * 
     * @param {type} keyCode
     * @returns {Boolean}
     */
    isNumberKey = function(keyCode) {

        if ((keyCode >= 48 && keyCode <= 57)
                || (keyCode >= 96 && keyCode <= 105)) {        
            return true;
        }
        var keys = [8, 9, 13, 35, 36, 37, 39, 45, 46, 109, 144, 173, 189];
        if (keys.indexOf(keyCode) !== -1) {        
            return true;
        }
        return false;
    };

    /**
     * 
     * @param {type} keyCode
     * @returns {[email protected];parse.numberFormatter.value|String}
     */
    getFormat = function(keyCode) {

        var jsonString = '{"numberFormatter" : [{"key":"32", "value":" ", "description":"space"}, {"key":"188", "value":",", "description":"comma"}, {"key":"190", "value":".", "description":"dot"}, {"key":"110", "value":".", "description":"dot"}]}';
        var jsonObject = JSON.parse(jsonString);
        for (var key in jsonObject.numberFormatter) {
            if (jsonObject.numberFormatter.hasOwnProperty(key)
                    && keyCode === parseInt(jsonObject.numberFormatter[key].key)) {
                return jsonObject.numberFormatter[key].value;
            }
        }
        return '';
    };

    /**
     * 
     * @type String
     */
    var jsonString = '{"shiftCharacterNumberMap" : [{"char":")", "number":"0"}, {"char":"!", "number":"1"}, {"char":"@", "number":"2"}, {"char":"#", "number":"3"}, {"char":"$", "number":"4"}, {"char":"%", "number":"5"}, {"char":"^", "number":"6"}, {"char":"&", "number":"7"}, {"char":"*", "number":"8"}, {"char":"(", "number":"9"}]}';

    /**
     * 
     * @param {type} value
     * @returns {[email protected];parse.shiftCharacterNumberMap.number|String}
     */
    getShiftCharSpecificNumber = function(value) {

        var jsonObject = JSON.parse(jsonString);
        for (var key in jsonObject.shiftCharacterNumberMap) {
            if (jsonObject.shiftCharacterNumberMap.hasOwnProperty(key)
                    && value === jsonObject.shiftCharacterNumberMap[key].char) {
                return jsonObject.shiftCharacterNumberMap[key].number;
            }
        }
        return '';
    };

    /**
     * 
     * @param {type} value
     * @returns {Boolean}
     */
    isShiftSpecificChar = function(value) {

        var jsonObject = JSON.parse(jsonString);
        for (var key in jsonObject.shiftCharacterNumberMap) {
            if (jsonObject.shiftCharacterNumberMap.hasOwnProperty(key)
                    && value === jsonObject.shiftCharacterNumberMap[key].char) {
                return true;
            }
        }
        return false;
    };

    /**
     * 
     * @param {type} element
     * @returns {undefined}
     */
    updateField = function(element) {

        var value = element.value;

        for (var index = 0; index < value.length; index++) {
            if (!isShiftSpecificChar(value.charAt(index))) {
                continue;
            }
            element.value = value.replace(
                    value.charAt(index),
                    getShiftCharSpecificNumber(value.charAt(index)));
        }
    };

    /**
     * 
     * @param {type} value
     * @param {type} element
     * @param {type} params
     */
    jQuery.validator.addMethod('numberExceedsMaxLimit', function(value, element, params) {

        value = parseInt(parseNumber(value, params));
        if (value.toString().length > numericMaxLimit) {
            showErrorMessage(element.id, false, null);
            setFocus(element.id);
            return false;
        }    
        return true;
    }, 'Exceeding the maximum limit of 13 digits. Example: 1234567890123.');

    /**
     * 
     * @param {type} value
     * @param {type} element
     * @param {type} params
     */
    jQuery.validator.addMethod('decimalExceedsMaxLimit', function(value, element, params) {

        value = parseFloat(parseDecimal(value, params)).toFixed(2);    
        if (value.toString().substring(
                0, value.toString().lastIndexOf('.')).length > numericMaxLimit
                || value.toString().length > decimalMaxLimit) {
            showErrorMessage(element.id, false, null);
            setFocus(element.id);
            return false;
        }    
        return true;
    }, 'Exceeding the maximum limit of 16 digits. Example: 1234567890123.00.');

    /**
     * @param {type} id
     * @param {type} locale
     * @returns {boolean}
     */
    isNumberExceedMaxLimit = function(id, locale) {

        var value = parseInt(parseNumber(
                document.getElementById(id).value, locale));
        if (value.toString().length > numericMaxLimit) {
            setFocus(id);
            return true;
        }    
        return false;
    };

    /**
     * @param {type} id
     * @param {type} locale
     * @returns {boolean}
     */
    isDecimalExceedsMaxLimit = function(id, locale) {

        var value = parseFloat(parseDecimal(
                document.getElementById(id).value, locale)).toFixed(2);
        if (value.toString().substring(
                0, value.toString().lastIndexOf('.')).length > numericMaxLimit
                || value.toString().length > decimalMaxLimit) {
            setFocus(id);
            return true;
        }
        return false;
    };

1178890cookie-checkjQuery: Währungsformatnummer

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy