Zum Hauptinhalt springen
Markup

HTML-Formatierer mit Vorschau

Rücken Sie HTML mit 2, 4 oder 8 Leerzeichen ein, reduzieren Sie es mit Minify und prüfen Sie die Originaleingabe in einer DOMPurify-bereinigten Sandbox-Vorschau. Praktisch für Webentwickler, Content-Manager und QA-Tester, die HTML-Snippets, E-Mail-Vorlagen oder CMS-Inhalte formatieren, komprimieren und auf Sicherheit prüfen möchten.

Web-Formatierer

Kurz erklärt

Machen Sie HTML lesbar, aber beachten Sie Heuristiken, semantisch relevante Leerraumänderungen und dass nur die Vorschau—nicht der kopierte Quelltext—bereinigt wird.

Unterstützte Funktionen

  • Getippter, eingefügter, Beispiel- oder .html/.htm-Text; kein DOM-Parsing und keine Konformitätsprüfung.
  • Reguläre Ersetzungen trennen Tags und berechnen 2/4/8 Leerzeichen Einzug; Minify reduziert Leerraum und Zwischenräume zwischen Tags.
  • Quelltext ist als formatted.html kopierbar/downloadbar. Vorschau bereinigt die Originaleingabe mit DOMPurify in einem Sandbox-iframe samt restriktiver CSP.
  • Eingebettetes CSS separat formatieren und nicht vertrauenswürdige Fragmente in einer bereinigten HTML-Ansicht prüfen.
  • Nein. DOMPurify und iframe-Schutz gelten nur für Vorschau; Quellausgabe kann Scripts, Eventhandler, Links und aktives Markup behalten.

HTML-Formatierer mit Vorschau verwenden

Führen Sie einen überprüfbaren HTML-Formatierer mit Vorschau-Ablauf in diesem Browser aus.

  1. 1

    Schritt 1

    Exakte Eingabe bereitstellen

    Getippter, eingefügter, Beispiel- oder .html/.htm-Text; kein DOM-Parsing und keine Konformitätsprüfung.

  2. 2

    Schritt 2

    Verfügbare Optionen setzen

    Format/Minify, Einzug 2/4/8, Live und Code/Vorschau; keine Parserreparatur, Validierung oder einstellbare Sanitizer-Regel.

  3. 3

    Schritt 3

    Vorgang ausführen

    Reguläre Ersetzungen trennen Tags und berechnen 2/4/8 Leerzeichen Einzug; Minify reduziert Leerraum und Zwischenräume zwischen Tags.

  4. 4

    Schritt 4

    Ergebnis prüfen

    Struktur mit echtem HTML-Parser vergleichen und pre, textarea, script, style sowie Templates vor Quellersatz testen.

  5. 5

    Schritt 5

    Weitergeben oder exportieren

    Eingebettetes CSS separat formatieren und nicht vertrauenswürdige Fragmente in einer bereinigten HTML-Ansicht prüfen.

Häufige Fehler

Scripts, Formulare oder netzabhängige Widgets in der Sandbox-Vorschau testen

Folge: Bereinigung und restriktive iframe-CSP entfernen aktives Markup und blockieren Fähigkeiten absichtlich. Produktionsverhalten kann dadurch defekt wirken, obwohl die Quelle unverändert ist.

Lösung: Die Vorschau nur für bereinigtes statisches Rendering verwenden und aktives Verhalten in einer isolierten, auditierten Anwendungsumgebung testen.

Kopierten oder geladenen Quelltext veröffentlichen, weil die Vorschau sicher aussah

Folge: DOMPurify und iframe-Schutz gelten nur im Vorschaupfad. Der formatierte Quelltext kann weiterhin Scripts, Eventhandler, unsichere URLs und anderes aktives Markup enthalten.

Lösung: Veröffentlichbares HTML durch die auditierte Sanitizer- und Validierungspipeline der Anwendung führen; diese Vorschau ersetzt keine Build- oder Serversicherheit.

Diesen Randfall übersehen: Warum kann formatiertes oder minimiertes HTML anders reagieren?

Folge: Regex ersetzt keinen HTML-Tokenizer; Leerraumkollaps und Tagtrennung können Raw-Text, Vorformatierung, Inline-Inhalt, Fehler oder Templates verändern.

Lösung: Für Produktion einen parserbasierten Formatierer einsetzen und Fixture mit leerraumsensitiven Knoten bewahren.

Bewährte Verfahren

  • Struktur mit echtem HTML-Parser vergleichen und pre, textarea, script, style sowie Templates vor Quellersatz testen.
  • Für Produktion einen parserbasierten Formatierer einsetzen und Fixture mit leerraumsensitiven Knoten bewahren.
  • Eine plausible Vorschau beweist weder Sicherheit, Gültigkeit, Barrierefreiheit noch Produktionsgleichheit der Quelle.

Verbundene Abläufe

Quelltext formatieren, ohne Vorschau mit Bereinigung zu verwechseln

HTML-Formatierer mit VorschauCSS-FormatiererMarkdown-zu-HTML-Ansicht

Eingebettetes CSS separat formatieren und nicht vertrauenswürdige Fragmente in einer bereinigten HTML-Ansicht prüfen.

  1. Original und Fixture mit pre, textarea, script, style und template bewahren
  2. Nur zur Quellprüfung formatieren und geparste Struktur mit dem Original vergleichen
  3. Leerraumsensitive und fehlerhafte Auszeichnung in einem standardkonformen Parser prüfen
  4. Vorschau für bereinigtes statisches Rendering statt aktives Verhalten verwenden
  5. Nur über die auditierte Sanitizer- und Build-Pipeline der Anwendung veröffentlichen

Browser-Einschränkungen

  • Regex ersetzt keinen HTML-Tokenizer; Leerraumkollaps und Tagtrennung können Raw-Text, Vorformatierung, Inline-Inhalt, Fehler oder Templates verändern.
  • Eingabe, Ausgabe, Sanitizer-Markup und iframe können gemeinsam Speicher belegen; große Dokumente können stocken.
  • DOMPurify-/Sandbox-Verhalten variiert und die Vorschau ist absichtlich keine vollständige Netzwerkseite.

Verbindliche Quellen

HTML Standard: SyntaxHerausgeber: WHATWG · Geprüft: 2026-07-26HTML Standard: iframe sandbox and srcdocHerausgeber: WHATWG · Geprüft: 2026-07-26DOMPurifyHerausgeber: Cure53 · Geprüft: 2026-07-26

Konkrete Beispiele

Eingabe
<div><span>Hi</span></div>
Ergebnis
<div> <span> Hi </span> </div>

Bei zwei Leerzeichen stellt die Heuristik Tags und Text verschachtelt dar; reale Dokumente parserbasiert prüfen.

Häufig gestellte Fragen

Parst der Formatierer HTML oder ordnet er nur Quelltext neu?

Getippter, eingefügter, Beispiel- oder .html/.htm-Text; kein DOM-Parsing und keine Konformitätsprüfung.

Warum kann formatiertes oder minimiertes HTML anders reagieren?

Regex ersetzt keinen HTML-Tokenizer; Leerraumkollaps und Tagtrennung können Raw-Text, Vorformatierung, Inline-Inhalt, Fehler oder Templates verändern.

Ist kopierter oder geladener HTML-Quelltext bereinigt und veröffentlichungssicher?

Nein. DOMPurify und iframe-Schutz gelten nur für Vorschau; Quellausgabe kann Scripts, Eventhandler, Links und aktives Markup behalten.

Welche Elemente brauchen nach der Formatierung einen parserbasierten Vergleich?

Struktur mit echtem HTML-Parser vergleichen und pre, textarea, script, style sowie Templates vor Quellersatz testen.

Werden importiertes HTML oder iframe-Vorschauinhalte hochgeladen?

Quelle, DOMPurify, srcdoc, Kopie und Download bleiben lokal; Vorschau blockiert Scripts und netzfähige Attribute.

Wie sollten eingebettetes CSS und nicht vertrauenswürdige Fragmente geprüft werden?

Eingebettetes CSS separat formatieren und nicht vertrauenswürdige Fragmente in einer bereinigten HTML-Ansicht prüfen.

Datenschutz und Offline-Verhalten

Quelle, DOMPurify, srcdoc, Kopie und Download bleiben lokal; Vorschau blockiert Scripts und netzfähige Attribute.

Verwandte Werkzeuge