json-formatieren.de

Transparenz

Methodik

Wie unser JSON-Formatter parst, formatiert, Fehler erkennt und Schlüssel sortiert. Was im Browser passiert, und welche Standards wir referenzieren.

Parsing-Schritt

Wir nutzen das native JSON.parse des Browsers. Es ist in jeder V8/SpiderMonkey/JSCore-Engine seit über 15 Jahren implementiert, hoch-optimiert (V8 erreicht ~1 GB/s in Chrome 130) und folgt strikt RFC 8259 sowie ECMA-404.

Das heißt: keine eigene Implementierung, keine Abweichung vom Standard. Wir parsen mit derselben Logik, die Ihre Anwendung in Produktion nutzt.

Pretty-Print

Nach erfolgreichem Parsing serialisieren wir das Objekt mit JSON.stringify(parsed, null, indent). Der dritte Parameter steuert die Einrückung: 2, 3 oder 4 Leerzeichen. Resultat ist deterministisch - gleiche Eingabe ergibt immer gleiche Ausgabe.

Schlüssel-Sortierung

Wenn die Option aktiv ist, werden alle Schlüssel rekursiv alphabetisch sortiert. Implementierung in src/lib/jsonFormatter.ts:

function sortKeysRecursive(obj) {
  if (Array.isArray(obj)) return obj.map(sortKeysRecursive);
  if (obj !== null && typeof obj === 'object') {
    return Object.keys(obj).sort()
      .reduce((acc, key) => {
        acc[key] = sortKeysRecursive(obj[key]);
        return acc;
      }, {});
  }
  return obj;
}

Sortier-Reihenfolge: Array.prototype.sort Default, also lexikographisch nach UTF-16-Codepoints. Für deutsche Strings mit Umlauten reicht das in 99 % der Fälle - bei Bedarf eine Custom-Sortierfunktion ergänzen.

Minify

Im Minify-Modus rufen wir JSON.stringify(parsed) ohne den space-Parameter auf. Output enthält keine Whitespaces zwischen Tokens - kompakteste valide Darstellung.

Fehler-Position-Detection

V8 und SpiderMonkey geben bei SyntaxError die Byte-Position des problematischen Tokens zurück: Unexpected token X in JSON at position N. Wir extrahieren N per Regex und rechnen sie über Zeilenumbrüche in eine Zeilen-Nummer um:

const match = errorMsg.match(/position (\\d+)/);
const position = match ? parseInt(match[1]) : 0;
const line = input.substring(0, position).split('\\n').length;

Bei Firefox-SpiderMonkey ist die Zeilen-Information direkt im Error enthalten - wir fangen aber nur die V8-Variante ab, weil Firefox-Errors am verbreiteten Format vorbeigehen. TODO für eine spätere Version.

Syntax-Highlighting im Output

Der formatierte Output wird in src/lib/jsonHighlight.ts mit einer einzelnen Regex tokenisiert (Strings, Zahlen, Booleans, null) und in HTML-Spans mit entsprechenden CSS-Klassen verpackt. Das ist kein voller Lexer - er reicht für valides JSON, das wir hier ohnehin garantiert haben.

Was wir NICHT machen

  • Kein Server-Roundtrip: Ihre Daten verlassen den Browser nicht.
  • Kein JSON5 / JSONC: Unser Tool ist striktes RFC 8259. Wer Kommentare im JSON braucht, sollte einen JSONC-Parser nutzen.
  • Keine Schema-Validation: Nur Syntax-Validierung. Schema-basierte Validierung erfordert ein eigenes Schema und Ajv - siehe unseren Ratgeber dazu.
  • Kein Streaming: Bei Dateien über ~50 MB sollten Sie einen serverseitigen Streaming-Parser nutzen - siehe Streaming-Ratgeber.

Limitierungen

  • Browser-RAM: Sehr große JSON-Dokumente (über 100 MB) können den Browser-Tab zum Crashen bringen. Ab 500 KB zeigt das Tool eine Warnung.
  • Lone Surrogates: Strings mit unpaarigen Surrogate-Codepoints werden von V8 zu U+FFFD (Replacement-Character) konvertiert. Das ist Browser-Standardverhalten, nicht abweichend von Spec.
  • Number-Präzision: Zahlen über 253-1 verlieren bei JSON.parse Präzision (JavaScript-Limit). Workaround: solche Werte als String serialisieren.

Code-Referenzen