Fügen Sie den Zahlen alle drei Ziffern ein Komma hinzu

160

Wie kann ich mit jQuery alle drei Ziffern Zahlen mit einem Komma-Trennzeichen formatieren?

Beispielsweise:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
jquery number-formatting Steve
quelle
Ich bin neu in jQuery und möchte eine einfache Funktion / ein Plugin, das nur alle drei Ziffern ein Komma hinzufügt, wenn die Zahlen länger als drei Ziffern sind. Nur positive Zahlen, keine Brüche, keine Dezimalstellen, keine Währung und kein US-Standardformat (1.111), nicht (1.111 USD oder 1.111,11 USD). Ich hätte lieber jQuery und wenn möglich nicht nur Javascript verwendet und wäre nett, wenn ich den Code auf eine Funktion setzen würde, damit er sehr einfach angewendet werden kann. Wie mache ich das? Schätzen Sie die Beiträge aller. Danke noch einmal.
Steve
2
@unknown: Du hast schon viele Antworten. Sehen Sie sich die Antworten an, die Sie erhalten haben, und bewerten Sie sie, um festzustellen, welche für Sie am besten geeignet sind. Wenn Sie weitere Erläuterungen zu einer der Antworten benötigen, geben Sie diese als Kommentar zu dieser Antwort ein.
Mark Byers
1
Entschuldigung, meine Frage war nicht präzise genug, aber siehe Doug Neiner Plugin-Format mit Paul Creaseys Code für die Antwort.
Steve

Antworten:

241

@Paul Creasey hatte die einfachste Lösung als Regex, aber hier ist es als einfaches jQuery-Plugin:

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

Sie könnten es dann so verwenden:

$("span.numbers").digits();
Doug Neiner
quelle
4
Funktioniert perfekt! Vielen Dank an Paul Creasey für den einfachen, eleganten Code und an Doug Neiner für das Plugin-Format. Gutschrift für beide.
Steve
4
RC @Mark Byers Die Syntax ist richtig. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") gibt jedoch' 999.9.999 'zurück.
Bendewey
6
Einen leichten Mod für Eingabefelder gemacht:$.fn.digits = function(){ return this.each(function(){ $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); }) }
mpemburn
3
Ich denke, dies wäre besser geeignet für eine jQuery-Dienstprogrammfunktion mit Namensabstand, z $.digits = function() { ... };.
Alex
63
Der schnellste Weg istnumber.toLocaleString("en");
Derek 21 會 功夫
95

Sie könnten verwenden Number.toLocaleString():

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534
Erweitern Sie das Snippet

Abhijeet
quelle
Ich habe es versucht, aber nicht auf Live-Server, sondern auf localhost ..
Abed Putra
1
@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp in allen Browsern
Ricks
Das hat bei mir am einfachsten funktioniert. Ich brauchte Währung und Kommas. Ich konnte auch Eigenschaften festlegen: var n = 26787.89 var myObjCurrency = { style: "currency", currency: "USD", currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));
AWP
78

So etwas, wenn Sie sich für Regex interessieren und sich nicht sicher sind, wie die Syntax für das Ersetzen lautet!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
Paul Creasey
quelle
2
Die Syntax ist richtig. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") gibt jedoch' 999.9.999 'zurück.
Mark Byers
@ Unbekannt, ich habe es zu einer Antwort verschoben. Es befindet sich weiter unten auf dieser Seite mit einem Verwendungsbeispiel.
Doug Neiner
27

Sie könnten NumberFormatter ausprobieren .

$(this).format({format:"#,###.00", locale:"us"});

Es werden auch verschiedene Ländereinstellungen unterstützt, einschließlich natürlich der USA.

Hier ist ein sehr vereinfachtes Beispiel für die Verwendung:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.numberformatter.js"></script>
        <script>
        $(document).ready(function() {
            $(".numbers").each(function() {
                $(this).format({format:"#,###", locale:"us"});
            });
        });
        </script>
    </head>
    <body>
        <div class="numbers">1000</div>
        <div class="numbers">2000000</div>
    </body>
</html>

Ausgabe:

1,000
2,000,000
Mark Byers
quelle
Ich habe einen Blick auf dieses Plugin geworfen und nach der Beschreibung des Autors sollte es in Formulareingabefeldern verwendet werden. Wie kann ich es übernehmen, um es auf <span class = "numbers"> 2984 </ span> anzuwenden, damit es ohne Dezimalstellen auf <span class = "numbers"> 2.984 </ span> formatiert wird? Ich habe versucht, $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); aber nichts passierte. Ich überprüfe immer noch das Plugin und spiele damit herum. Entschuldigung, ich bin ein jQuery-Neuling :-)
Steve
+1 Gut zu wissen über dieses Plugin. Ich stimme zu, dass dies für Wachstum und zukünftige Internationalisierung der beste Weg wäre.
Doug Neiner
Hier ist der Link zu seinem GitHub-Repo. github.com/hardhub/jquery-numberformatter
Mwangi Thiga
22

Dies ist nicht jQuery, aber es funktioniert für mich. Entnommen von dieser Seite .

function addCommas(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;
}
Strahl
quelle
1
Sehr "Wurzeln" von dir :)
MonoThreaded
"Rootsy" mag es sein, aber ich glaube nicht, dass die anderen Fancy-Pants-Ansätze in meiner Situation funktioniert hätten, in der die Daten in einen Canvas (Chart.JS) eingebettet sind. Das Hinzufügen dieser Funktion und das Aufrufen im afterDraw () -Ereignis des Diagramms funktioniert jedoch einwandfrei: ctx.fillText (addCommas (dataset.data [i]),
B. Clay Shannon,
Dies funktioniert beispielsweise bei 3000000 (7 Ziffern) nicht. nur für 6 und weniger Ziffern!
Mostafa Norzade
21

Verwenden Sie die Funktion Number ();

$(function() {

  var price1 = 1000;
  var price2 = 500000;
  var price3 = 15245000;

  $("span#s1").html(Number(price1).toLocaleString('en'));
  $("span#s2").html(Number(price2).toLocaleString('en'));
  $("span#s3").html(Number(price3).toLocaleString('en'));

  console.log(Number(price).toLocaleString('en'));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="s1"></span><br />
<span id="s2"></span><br />
<span id="s3"></span><br />
Erweitern Sie das Snippet

Bamossza
quelle
Danke, ich habe deine Antwort benutzt. Es kann erwähnenswert sein, dass dies nur Zahlen mit einer Länge von bis zu 15 Stellen unterstützt.
Tallpaul
21

Antwort 2016:

Javascript hat diese Funktion, daher ist Jquery nicht erforderlich.

yournumber.toLocaleString("en");
Kamy D.
quelle
2
Funktioniert dies in allen Browsern? Es funktioniert gut auf Chrom. Funktioniert es auf IE9 + & Oper, Safari?
Zeppelin
@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp unterstützt alle Browser
Ricks
1
Stellen Sie einfach sicher, dass die Nummer, unter der Sie sie anrufen, ein Nummerntyp (int, float usw.) und keine Zeichenfolge ist.
el3ati2
16

Eine gründlichere Lösung

Der Kern davon ist der replaceAnruf. Bisher glaube ich nicht, dass eine der vorgeschlagenen Lösungen alle folgenden Fälle behandelt:

  • Ganzzahlen: 1000 => '1,000'
  • Saiten: '1000' => '1,000'
  • Für Saiten:
    • Erhält Nullen nach der Dezimalstelle: 10000.00 => '10,000.00'
    • Verwirft führende Nullen vor der Dezimalstelle: '01000.00 => '1,000.00'
    • Fügt nach der Dezimalstelle keine Kommas hinzu: '1000.00000' => '1,000.00000'
    • Erhält führend -oder +:'-1000.0000' => '-1,000.000'
    • Gibt unveränderte Zeichenfolgen zurück, die keine Ziffern enthalten: '1000k' => '1000k'

Die folgende Funktion führt alle oben genannten Aufgaben aus.

addCommas = function(input){
  // If the regex doesn't match, `replace` returns the string unmodified
  return (input.toString()).replace(
    // Each parentheses group (or 'capture') in this regex becomes an argument 
    // to the function; in this case, every argument after 'match'
    /^([-+]?)(0?)(\d+)(.?)(\d+)$/g, function(match, sign, zeros, before, decimal, after) {

      // Less obtrusive than adding 'reverse' method on all strings
      var reverseString = function(string) { return string.split('').reverse().join(''); };

      // Insert commas every three characters from the right
      var insertCommas  = function(string) { 

        // Reverse, because it's easier to do things from the left
        var reversed           = reverseString(string);

        // Add commas every three characters
        var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');

        // Reverse again (back to normal)
        return reverseString(reversedWithCommas);
      };

      // If there was no decimal, the last capture grabs the final digit, so
      // we have to put it back together with the 'before' substring
      return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
    }
  );
};

Sie können es in einem jQuery-Plugin wie folgt verwenden:

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};
Nathan Long
quelle
9

Sie können sich auch das jquery FormatCurrency- Plugin ansehen (dessen Autor ich bin). Es unterstützt auch mehrere Ländereinstellungen, hat jedoch möglicherweise den Overhead der Währungsunterstützung, den Sie nicht benötigen.

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
Bendewey
quelle
4
Diese Frage hat mich dazu gebracht, v1.3 dieses Plugins zu veröffentlichen, also danke
bendewey
3

Hier ist mein Javascript, das nur auf Firefox und Chrome getestet wurde

<html>
<header>
<script>
    function addCommas(str){
        return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function test(){
        var val = document.getElementById('test').value;
        document.getElementById('test').value = addCommas(val);
    }
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>
Lam
quelle
1

Sehr einfach ist die Verwendung der toLocaleString()Funktion

tot = Rs.1402598 //Result : Rs.1402598

tot.toLocaleString() //Result : Rs.1,402,598
Rifkan Razak
quelle
1 
function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

Sie können dies versuchen, es funktioniert für mich

benoit1521
quelle