Konvertieren Sie XML in JavaScript in JSON

  1. Die Extensible Markup Language (XML)
  2. Die JavaScript-Objektnotation (JSON)
  3. Verwenden Sie die matchAll()-Methode, um XML in JavaScript in JSON zu konvertieren
Konvertieren Sie XML in JavaScript in JSON

In diesem Artikel erfahren Sie, wie Sie XML-Strings mit Hilfe von Regex und der Standard-String-Methode matchAll() in JavaScript in Daten im JSON-Format konvertieren.

Die Extensible Markup Language (XML)

Die Extensible Markup Language (XML) ist eine HTML-ähnliche Auszeichnungssprache. Es hat keine vordefinierten Tags wie HTML, aber wir können unsere Tags für unsere Anforderungen definieren.

Wir können die Daten mithilfe von XML speichern, durchsuchen und teilen.

Beispiel:

<root>
<tag>tag content</tag>
<tag2>another content</tag2>
</root>

Wir müssen das Tag mit / wie HTML öffnen und schließen.

Die JavaScript-Objektnotation (JSON)

JavaScript Object Notation (JSON) ist ein Textformat zum Speichern und Transportieren von Daten. Es ist selbsterklärend und leicht verständlich.

In JSON speichern wir Daten in Schlüssel-Wert-Paaren (jeder Schlüssel hat einen Wert).

Beispiel:

'{"name":"Bravo", "age":40, "car":null}'

Verwenden Sie die matchAll()-Methode, um XML in JavaScript in JSON zu konvertieren

Es gibt mehrere Möglichkeiten, XML-Daten genau in JSON zu konvertieren oder zu übersetzen. Wir werden lernen, XML mit Regex (regulärer Ausdruck) und der Standard-JavaScript-String-Methode matchAll() in JSON zu konvertieren.

Die JavaScript-Methode matchAll() gibt einen Iterator aller Ergebnisse zurück, indem sie einen String mit Hilfe der bereitgestellten Regex abgleicht.

Vom Benutzer bereitgestellte Eingabe (XML):

<root><tag>tag content</tag><tag2>another content</tag2></root>

Erwartete JSON-Ausgabe nach der Konvertierung:

[object Object] {
    root: [object Object] {
        tag: "tag content",
        tag2: "another content"
    }
}

Im folgenden Beispiel verwenden wir einen XML-String und implementieren die Methode matchALL() mit Regex, um ihn in das JSON-Datenformat zu konvertieren.

Regex erforderlich:

regex = /(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm;

Beispiel:

<script>
const xmlString = '<root><tag>tag content</tag><tag2>another content</tag2></root>'; //provided xml

function convertXmlToJson(xmlString) {
    const jsonData = {};
    for (const result of xmlString.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = result[1] || result[3];
        const value = result[2] && convertXmlToJson(result[2]); //recusrion
        jsonData[key] = ((value && Object.keys(value).length) ? value : result[2]) || null;
    }
    return jsonData;
}
console.log("Data after converting to JSON:")
console.log(convertXmlToJson(xmlString)); //print the result in logs
</script>

Ausgang:

"Data after converting to JSON:"
[object Object] {
    root: [object Object] {
        tag: "tag content",
        tag2: "another content"
    }
}

Erläuterung:

  • Im Beispiel haben wir die XML-Zeichenfolge mit einer Variablen initialisiert, um JSON-Daten zu generieren.

  • Wir haben eine Funktion convertXmlToJson() deklariert, um den XML-String als Argument zu erhalten.

  • In dieser Funktion haben wir die for-Schleife verwendet, um die Ausführung der XML-Zeichenfolge mit matchAll(regex) zu wiederholen.

  • Innerhalb des Schleifenkörpers erstellen wir Schlüssel und Werte und speichern das Ergebnis in der bereits deklarierten Variablen const jsonData = {}.

  • Sie können eine Funktion namens convertXmlToJson() im Körper selbst sehen. Dies wird als Rekursion (rekursive Funktion) bezeichnet.

    Rekursive Funktionen werden in ihren geschweiften Klammern aufgerufen, um die Ausführung zu iterieren.

  • Dann geben wir einfach das convertXmlToJson() mit der jsonData-Variablen zurück.

  • Wir verwenden die Methode console.log(), um die Funktion aufzurufen und das zurückgegebene Ergebnis anzuzeigen.

Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren

Verwandter Artikel - JavaScript JSON