Webseiten-Markup in JSON verwandeln – für Skripte, APIs und Testdaten
Die Daten stecken oft schon auf der Seite – in einer `<table>`, in einer CMS-Vorschau oder in einem HTML-Export aus einem Lieferantenportal. Was fehlt, ist ein sauberes JSON: ein Array von Objekten für einen Fetch-Handler, ein Config-Block für Test-Fixtures oder strukturierte Zeilen für einen Datenbank-Seed. Text aus dem Browserfenster zu kopieren führt selten zum Ziel. Kopf- und Datenzeilen vermischen sich, verbundene Zellen verschwinden, und am Ende bauen Sie Objekte mühsam von Hand im Editor. Ein HTML-in-JSON-Workflow sollte die Struktur prüfbar machen, bevor Sie die erste geschweifte Klammer kopieren. Das Tool läuft lokal im Tab. Links HTML einfügen, rechts Raster und JSON-Ausgabe mitwachsen sehen, eine Zelle korrigieren oder das Quell-Markup anpassen, dann `.json` kopieren oder laden. Keine Upload-Warteschlange, kein Konto – und Ihr Markup verlässt den Rechner nicht. Das zählt, wenn Kundennamen, interne Preise oder noch nicht veröffentlichte Produktdaten im HTML stehen.
Ein HTML-in-JSON-Konverter für Tabellen und ganze Seiten
Echtes HTML ist selten eine einzige perfekte Tabelle. Mal ist es ein Preisraster mit `colspan`-Kopfzeilen, mal eine Produktseite, aus der Sie Stichpunkte und Spezifikationstabelle in einer JSON-Datei brauchen. Beide Wege gehen hier – ohne auf ein anderes Tool auszuweichen. **Tabellen extrahieren** liest semantisches `<table>`-Markup und baut ein echtes Raster: `<th>` und `<td>` landen in eigenen Spalten, `colspan` und `rowspan` erscheinen in der Vorschau als verbundene Zellen – so sehen Sie, wie Summenzeilen später ins JSON geflatten werden. **Volltext extrahieren** läuft Überschriften, Absätze und Listen ab, schreibt jeden Block in eine eigene Zeile (eine Spalte) und spreitet eingebettete Tabellen trotzdem mehrspaltig aus. Der Modus passt, wenn die Seite vor allem Fließtext ist und die Tabelle erst in der Mitte kommt – oder wenn lesbarer Text und Tabellendaten in einem Export zusammen sollen. Auf der Ausgabeseite aktivieren Sie **Erste Zeile als Schlüssel**, wenn die Kopfzeile zu Eigenschaftsnamen werden und Sie ein Array von Objekten statt verschachtelter String-Arrays brauchen. **Schön formatieren** hält den Tab „Formatiert“ lesbar für Code-Reviews; **Minimiert** spart Zeichen, wenn die Payload ohnehin komprimiert wird.
Die meisten Upload-Konverter verstecken den Parsing-Schritt. Datei schicken, JSON zurückbekommen – und erst in Postman merken, dass eine Spalte verrutscht ist. Hier teilen sich HTML-Editor, Raster-Vorschau und JSON-Panel einen Bildschirm. Stimmt eine Zelle nicht, klicken Sie ins Raster und tippen die Korrektur. Stimmt die Struktur nicht – fehlendes `<thead>`, ein zusätzliches Wrapper-`div`, ein kaputtes Tag – wechseln Sie zum HTML-Tab und bearbeiten das Markup direkt; die Vorschau zieht mit. Mehrere Top-Level-Tabellen in einem Einfügen werden in der Symbolleiste zu eigenen Arbeitsblättern. Jeden Block prüfen, das passende Blatt wählen, JSON kopieren oder laden. Brauchen Sie später wieder Markup? Excel zu HTML im Konvertierungsmenü folgt dem gleichen Vorschau-zuerst-Prinzip in die andere Richtung.
Konverter ausprobierenTabellenmodus und Volltextmodus
`<table>`-Raster für strukturierte Daten oder die ganze Seite für Mischinhalte – ohne Toolwechsel.
HTML oder Zellen vor dem Export bearbeiten
Tags im Quellpanel korrigieren oder Werte im Raster anpassen – das kopierte JSON entspricht dem, was Sie auf dem Bildschirm geprüft haben.
Formatiertes JSON mit Objektschlüsseln
Optionale Kopfzeile-zu-Schlüssel-Zuordnung und schön formatierte Ausgabe, plus minimierte Ansicht für kompakte Payloads.
Was dieser HTML-in-JSON-Konverter anders macht
Werkbank-Layout – HTML rein, strukturiertes JSON raus – mit einer Vorschau, der Sie vor dem Kopieren vertrauen können.
Daten sehen, bevor sie JSON werden
JSON verzeiht wenig: eine verschobene Spalte, und jedes Objekt trägt falsche Feldnamen. Die Raster-Vorschau ist dafür da, dass Sie Kopfzeilen lesen, Zahlen spalten und doppelte Zeilen erkennen, während das HTML noch daneben offen ist. Einfügen hat Vorrang. Entwickler haben den Ausschnitt oft schon – aus den DevTools, einem gespeicherten Export, einer E-Mail-Vorlage, einem Storybook-Snapshot. `.html` oder `.htm` importieren, wenn die Datei zu groß für die Zwischenablage ist; in beiden Fällen bleibt das Parsen im Browser. Wenn die Vorschau stimmt, öffnen Sie **JSON-Optionen**: erste Zeile als Schlüssel mappen oder ein schlichtes 2D-Array behalten. Der Tab „Formatiert“ zeigt eingerückte Ausgabe zum Gegenlesen; „Minimiert“ streicht Leerzeichen für Payloads, die Sie ohnehin gzippen. In die Zwischenablage kopieren oder `.json` laden – gleiche Daten, Ihr bevorzugter Übergabeweg.
So wandeln Sie HTML in JSON um
HTML einfügen oder importieren
Markup links einfügen – meist aus der Zwischenablage. Für eine gespeicherte Seite über Hochladen `.html` oder `.htm` wählen. **Tabellen extrahieren**, wenn die Daten in `<table>`-Tags stehen; **Volltext extrahieren**, wenn Überschriften, Absätze und Tabellen gemischt sind.
Raster prüfen und korrigieren
Das Vorschau-Panel zeigt die Zeilen, die JSON werden. Kopfzeilen, Zahlen und verbundene Bereiche durchgehen. Mehrere Tabellen im HTML? Blatt in der Symbolleiste wählen. Falscher Wert? Zelle anklicken. Falsche Struktur? Zum HTML-Tab wechseln und Markup direkt bearbeiten – das Raster aktualisiert sich beim Tippen.
JSON-Optionen setzen
**JSON-Optionen** in der Symbolleiste öffnen. **Erste Zeile als Schlüssel** aktivieren, wenn Sie ein Array von Objekten mit benannten Feldern brauchen. **Schön formatieren** für lesbare Ausgabe im Tab „Formatiert“, oder „Minimiert“ für einen kompakten String.
Kopieren oder herunterladen
**JSON kopieren** für den schnellen Sprung in den Editor oder Postman. **.json herunterladen**, wenn die Datei auf der Festplatte landen soll – der Name folgt dem importierten Dateinamen. Später wieder HTML? Excel zu HTML im Konvertierungsmenü für die Rückrichtung.
HTML in JSON – Fragen vor dem Export
Ihr nächstes HTML-Fragment als einsatzbereites JSON
Einfügen, Raster prüfen, Markup oder Zellen bearbeiten, kopieren oder laden – ohne Objekte von Hand abzutippen.
HTML in JSON
- Tabellen extrahieren und Volltext extrahieren in einem Tool
- HTML direkt bearbeiten oder Werte im Raster korrigieren
- Erste Zeile als Schlüssel und schön formatiertes JSON
- JSON kopieren oder `.json` aus der Symbolleiste laden
Zurück zu Markup? Excel zu HTML im Konvertierungsmenü.
Weniger manuelles Objekt-Bauen
Strukturierte Daten aus Web-Markup holen – mit einer Vorschau, die Sie prüfen können, bevor das JSON den Browser verlässt.