Wie lässt sich HTML in JSON umwandeln?

Du kannst HTML-Inhalte auslesen und als JSON speichern; bloßes Umbenennen der Datei reicht nicht.

Entscheidend ist, welche Inhalte du übernehmen möchtest: beispielsweise Überschriften und Absätze oder den gesamten HTML-Quelltext als Textfeld. Mit JavaScript kannst du HTML zunächst mit DOMParser einlesen und die ausgewählten Daten mit JSON.stringify in JSON umwandeln.

Beispiel: Inhalte als JSON ausgeben

Dieses Beispiel kannst du in der Entwicklerkonsole deines Browsers ausführen. Der HTML-Text ist hier direkt im Beispiel hinterlegt:

const html = "<h1>Hallo</h1><p>Ein Beispieltext.</p>";

const dokument = new DOMParser().parseFromString(html, "text/html");

const daten = {
  titel: dokument.querySelector("h1")?.textContent  "",
  absaetze: Array.from(
    dokument.querySelectorAll("p"),
    absatz => absatz.textContent
  )
};

const json = JSON.stringify(daten, null, 2);
console.log(json);

Der Parser erstellt ein auslesbares Dokument; JSON.stringify erzeugt anschließend den JSON-Text. Das Ergebnis dieses Beispiels lautet:

{
  "titel": "Hallo",
  "absaetze": [
    "Ein Beispieltext."
  ]
}

Kopiere die Ausgabe in eine Textdatei und speichere sie beispielsweise als daten.json.

Unterschied: Daten extrahieren oder HTML aufbewahren

Das Beispiel übernimmt gezielt Textinhalte. Wenn du stattdessen den gesamten HTML-Quelltext als einzelnes Datenfeld aufbewahren möchtest, genügt:

const json = JSON.stringify({ html: html }, null, 2);
console.log(json);

JSON.stringify übernimmt dabei die notwendige Maskierung von Sonderzeichen. Das HTML wird so als Zeichenkette gespeichert, nicht in einzelne Inhaltsfelder zerlegt.

Quellen:

• DOMParser, MDN Web Docs
• JSON.stringify(), MDN Web Docs