DOMParser.parseFromString() — Methode · JavaScript-Referenz

Signatur

DOMParser.prototype.parseFromString(string, mimeType)

Beschreibung

parseFromString() wandelt einen String mit Markup in einen vollständigen DOM-Baum um. Welcher Parser verwendet wird, hängt vom mimeType ab: Bei "text/html" kommt der fehlertolerante HTML-Parser zum Einsatz und das Ergebnis ist ein HTMLDocument. Bei "text/xml", "application/xml", "application/xhtml+xml" oder "image/svg+xml" wird streng nach XML-Regeln geparst und ein XMLDocument zurückgegeben.

Typische Einsatzfälle sind das Auswerten von XML-Antworten (z. B. RSS-Feeds, SOAP, Konfigurationsdateien), das Auslesen von Daten aus per fetch() geladenem HTML oder das Erzeugen von SVG-Elementen aus einem String. Das erzeugte Dokument ist vom aktuellen Dokument getrennt: Skripte darin werden nicht ausgeführt und Ressourcen wie Bilder werden beim Parsen nicht geladen.

Wichtig: Beim HTML-Parser gibt es keine Parse-Fehler, fehlerhaftes Markup wird still korrigiert. Beim XML-Parser wird bei Fehlern keine Exception geworfen; stattdessen enthält das zurückgegebene Dokument ein <parsererror>-Element, das man selbst prüfen muss.

Wer Knoten aus dem geparsten Dokument ins aktuelle Dokument übernehmen möchte, sollte document.importNode() oder document.adoptNode() verwenden (bzw. die Knoten direkt anhängen, was sie implizit adoptiert).

Parameter

Name	Typ	Default	Beschreibung
$string Pflicht	string \| TrustedHTML		Der zu parsende Markup-String (HTML, XML, XHTML oder SVG). Bei aktivierten Trusted Types muss ein `TrustedHTML`-Objekt übergeben werden.
$mimeType Pflicht	"text/html" \| "text/xml" \| "application/xml" \| "application/xhtml+xml" \| "image/svg+xml"		Bestimmt den Parser und den Dokumenttyp. Jeder andere Wert führt zu einem `TypeError`.

Rückgabewert

Typ

Document

Beschreibung

Ein neues HTMLDocument (bei "text/html") bzw. XMLDocument (bei allen anderen MIME-Typen). Bei XML-Parse-Fehlern enthält es ein <parsererror>-Element.

Beispiele

HTML-String parsen und Daten auslesen

const html = `
  <ul id="produkte">
    <li data-preis="19.99">Tastatur</li>
    <li data-preis="49.90">Maus</li>
  </ul>`;

const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

const produkte = [...doc.querySelectorAll('#produkte li')].map((li) => ({
  name: li.textContent.trim(),
  preis: Number(li.dataset.preis),
}));

console.log(produkte);

[{ name: 'Tastatur', preis: 19.99 }, { name: 'Maus', preis: 49.9 }]

XML parsen mit Fehlerprüfung

const parseXml = (xmlString) => {
  const doc = new DOMParser().parseFromString(xmlString, 'application/xml');
  const fehler = doc.querySelector('parsererror');
  if (fehler) {
    throw new Error(`Ungültiges XML: ${fehler.textContent}`);
  }
  return doc;
};

const doc = parseXml('<config><eintrag key="theme">dark</eintrag></config>');
console.log(doc.querySelector('eintrag[key="theme"]').textContent);

try {
  parseXml('<config><offen></config>');
} catch (e) {
  console.log(e.message.startsWith('Ungültiges XML'));
}

dark true

RSS-Feed per fetch laden und auswerten

const ladeFeed = async (url) => {
  const response = await fetch(url);
  const text = await response.text();
  const doc = new DOMParser().parseFromString(text, 'text/xml');

  return [...doc.querySelectorAll('item')].map((item) => ({
    titel: item.querySelector('title')?.textContent ?? '',
    link: item.querySelector('link')?.textContent ?? '',
  }));
};

ladeFeed('/feed.xml').then((artikel) => console.log(artikel.slice(0, 3)));

[{ titel: '…', link: '…' }, …]

SVG-String ins Dokument einfügen

const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="18" fill="tomato" />
</svg>`;

const svgDoc = new DOMParser().parseFromString(svgString, 'image/svg+xml');
const svg = document.importNode(svgDoc.documentElement, true);
document.body.append(svg);

console.log(svg instanceof SVGSVGElement);

true

// Wichtig · Fallstricke

Keine Exception bei XML-Fehlern: Prüfe immer auf ein <parsererror>-Element. Wo es genau steht und was drin steht, unterscheidet sich je nach Browser (Firefox ersetzt das ganze Dokument, Chrome/Safari fügen es ein).
Sicherheit/XSS: <script>-Elemente im geparsten Dokument werden nicht ausgeführt und Ressourcen nicht geladen. Das Ergebnis ist aber nicht bereinigt: Fügst du Knoten mit Event-Handler-Attributen (z. B. <img onerror="…">) ins aktive Dokument ein, wird der Code ausgeführt. Bei nicht vertrauenswürdigen Eingaben einen Sanitizer wie DOMPurify verwenden oder nur textContent übernehmen. Bei aktivierter CSP mit require-trusted-types-for 'script' ist ein TrustedHTML-Wert Pflicht.
Ein ungültiger mimeType löst einen TypeError aus. Groß-/Kleinschreibung und Zusätze wie ; charset=utf-8 sind nicht erlaubt.
Beim HTML-Parsen wird immer ein vollständiges Dokument mit <html>, <head> und <body> erzeugt. Für kleine Fragmente sind oft <template> oder Range.createContextualFragment() einfacher.
In Node.js gibt es DOMParser nicht von Haus aus; dort helfen Bibliotheken wie jsdom oder linkedom.
Browser-Kompatibilität: wird von allen modernen Browsern unterstützt, auch in Web Workern ist DOMParser allerdings nicht verfügbar.

Siehe auch

XMLSerializer.serializeToString() Document.importNode() Document.adoptNode() Range.createContextualFragment() Element.innerHTML Document.parseHTMLUnsafe() Response.text()