Konvertieren Sie HTML in JSON

In diesem Artikel wird beschrieben, wie Sie HTML-Code in JSON konvertieren.

Verwenden Sie die JavaScript-Methode JSON.stringify(), um HTML in JSON zu konvertieren

JSON ähnelt dem JavaScript-Objekt, der Unterschied besteht darin, dass der Schlüssel als Zeichenfolge in JSON geschrieben wird. JSON ist sprachunabhängig und dient dem Datenaustausch zwischen Anwendungen oder Rechnern.

Das Beispiel einer JSON-Zeichenfolge ist unten gezeigt.

'{
    "name":"John",
    "age":30,
    "car":null
}'

Mit der Methode JSON.stringify() können wir das HTML-Dokument in eine solche Darstellung umwandeln. Die Methode wandelt das JavaScript-Objekt in einen JSON-String um.

Beispielsweise konvertieren wir das folgende HTML-Dokument in JSON.

Code - HTML:

<div id='para'>
  <p>
    Paragraph 1
  </p>
  <p>
    Paragraph 2
  </p>
</div>

Wir müssen das Dokument in JSON konvertieren. In HTML lautet die id des zu konvertierenden Containers para.

Verwenden Sie die Methode document.getElementById(), um das Dokument mit der ID para zurückzugeben. Die Variable para speichert das gesamte HTML-Dokument.

var para = document.getElementById('para');

Verwenden Sie als Nächstes die Eigenschaft outerHTML, um den serialisierten HTML-Inhalt der Variablen para zurückzugeben. Die Variable html enthält das gesamte Dokument in einem String-Format.

var html = para.outerHTML;

Speichern Sie dann den String html als JavaScript-Objekt. Benennen Sie den Schlüssel des Objekts als html.

var obj = {html: html};

Konvertieren Sie das Objekt abschließend mit der Methode JSON.stringify().

var json = JSON.stringify(obj);

Vollständiger Quellcode - JavaScript + Node.js:

var para = document.getElementById('para');
var html = para.outerHTML;
var obj = {html: html};
var json = JSON.stringify(obj);
console.log(json)

Ausgang:

"{'html':'<div id=\'para\'>\n  <p>\n    Paragraph 1\n  </p>\n  <p>\n    Paragraph 2\n  </p>\n</div>'}"

Auf diese Weise können wir jedes ausgewählte HTML in JSON konvertieren.