Zahl mit Trennpunkten

So funktioniert das Script

Das Script hat zwei Teile: die Funktion trennpunkteEinfuegen(), die aus einer eingetippten Zahl den formatierten Text baut, und darunter die Verkabelung, die beim Klick auf den Knopf die Eingabe liest und das Ergebnis in das zweite Feld schreibt. Die Funktion arbeitet dabei nicht mit Rechenoperationen, sondern fast nur mit Text — denn Trennpunkte sind reine Darstellung, keine Mathematik.

if (text.indexOf(",") !== -1 && text.indexOf(".") === -1) {
  text = text.replace(",", ".");
}
let zahl = String(parseFloat(text));

Zuerst wird die Eingabe „normalisiert": Enthält sie ein Komma, aber keinen Punkt, war das Komma als deutscher Dezimaltrenner gemeint und wird gegen einen Punkt getauscht — JavaScript versteht nur die englische Schreibweise. parseFloat() macht aus dem Text dann eine echte Zahl (und wirft dabei alles Ungültige weg), String() verwandelt sie gleich wieder in Text zurück, denn weiterverarbeitet wird zeichenweise.

const punkt = zahl.indexOf(".");
if (punkt !== -1) {
  vorKomma = zahl.substring(0, punkt);
  nachKomma = "," + zahl.substring(punkt + 1);
}

Dann wird die Zahl am Dezimalpunkt in zwei Hälften geteilt: vorKomma bekommt die Ziffern vor dem Punkt, nachKomma die Nachkommastellen — schon mit vorangestelltem deutschen Komma. indexOf(".") liefert die Position des Punkts oder -1, wenn es keinen gibt; bei ganzen Zahlen bleibt nachKomma einfach leer. Ein eventuelles Minuszeichen wird ebenfalls abgetrennt und in vorzeichen zwischengelagert, damit es beim Punktezählen nicht stört.

let zaehler = 0;
for (let i = vorKomma.length - 1; i > 0; i--) {
  zaehler++;
  if (zaehler % 3 === 0) {
    vorKomma = vorKomma.substring(0, i) + "." + vorKomma.substring(i);
  }
}

Das ist das Herzstück: Die Schleife wandert von der letzten Ziffer aus rückwärts durch den Vorkomma-Teil und zählt dabei mit. Immer wenn der Zähler ein Vielfaches von 3 erreicht (Modulo-Operator % — er liefert den Rest einer Division), wird an der aktuellen Position ein Punkt eingefügt: bei „1234567" also nach drei Ziffern von rechts („1234.567") und nach sechs („1.234.567"). Dass die Schleife bei i > 0 stoppt, verhindert einen Punkt ganz vorne — „.123.456" wäre falsch.

if (vorKomma.indexOf("e") === -1 && vorKomma !== "Infinity") { ... }

Diese Prüfung fängt zwei Sonderfälle ab: Extrem große Zahlen stellt JavaScript in Exponentialschreibweise dar (etwa 1.5e+21), und jenseits des darstellbaren Bereichs kommt Infinity heraus. In beiden Fällen ergäben Trennpunkte keinen Sinn, also bleibt der Text unverändert.

document.getElementById("tp-einfuegen").addEventListener("click", function () {
  ...
  document.getElementById("tp-ausgabe").value = trennpunkteEinfuegen(eingabe);
});

Zum Schluss die Verkabelung: addEventListener("click", …) lässt die Funktion bei jedem Klick auf den Knopf laufen. Vorher prüft das Script noch, ob überhaupt eine Zahl im Feld steht — wenn nicht, erscheint ein freundlicher Hinweis in der Ergebnisfläche statt einer Null.

Zum Anpassen: Wollt ihr die englische Schreibweise ausgeben (Komma als Tausendertrenner), tauscht ihr einfach die beiden Zeichen — in der Schleife das eingefügte "." gegen "," und beim Zusammenbau von nachKomma das "," gegen ".". Auch Gruppierungen in Vierergruppen sind möglich, indem ihr zaehler % 3 in zaehler % 4 ändert.