W3cubDocs

/Web APIs

DOMParser: parseFromString() method

The parseFromString() method of the DOMParser interface parses a string containing either HTML or XML, returning an HTMLDocument or an XMLDocument.

Syntax

js

parseFromString(string, mimeType)

Parameters

string

The string to be parsed. It must contain either an HTML, xml, XHTML, or svg document.

mimeType

A string. This string determines whether the XML parser or the HTML parser is used to parse the string. Valid values are:

  • text/html
  • text/xml
  • application/xml
  • application/xhtml+xml
  • image/svg+xml

A value of text/html will invoke the HTML parser, and the method will return an HTMLDocument. Any <script> element gets marked non-executable, and the contents of <noscript> are parsed as markup.

The other valid values (text/xml, application/xml, application/xhtml+xml, and image/svg+xml) are functionally equivalent. They all invoke the XML parser, and the method will return a XMLDocument.

Any other value is invalid and will cause a TypeError to be thrown.

Return value

An HTMLDocument or an XMLDocument, depending on the mimeType argument.

Examples

Parsing XML, SVG, and HTML

Note that a MIME type of text/html will invoke the HTML parser, and any other valid MIME type will invoke the XML parser. The application/xml and image/svg+xml MIME types in the example below are functionally identical — the latter does not include any SVG-specific parsing rules. Distinguishing between the two serves only to clarify the code's intent.

js

const parser = new DOMParser();

const xmlString = "<warning>Beware of the tiger</warning>";
const doc1 = parser.parseFromString(xmlString, "application/xml");
// XMLDocument

const svgString = '<circle cx="50" cy="50" r="50"/>';
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
// XMLDocument

const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");
// HTMLDocument

console.log(doc1.documentElement.textContent);
// "Beware of the tiger"

console.log(doc2.firstChild.tagName);
// "circle"

console.log(doc3.body.firstChild.textContent);
// "Beware of the leopard"

Error handling

When using the XML parser with a string that doesn't represent well-formed XML, the XMLDocument returned by parseFromString will contain a <parsererror> node describing the nature of the parsing error.

js

const parser = new DOMParser();

const xmlString = "<warning>Beware of the missing closing tag";
const doc = parser.parseFromString(xmlString, "application/xml");
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  // parsing failed
} else {
  // parsing succeeded
}

Additionally, the parsing error may be reported to the browser's JavaScript console.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
parseFromString 1 12 1 9 8 1.3 4.4 18 4 10.1 1 1.0
html 31 12 12 10 17 9.1 4.4.3 31 14 18 9.3 3.0
svg 4 12 10 10 15 3 ≤37 18 10 14 1 1.0
xml 1 12 1 9 8 1.3 4.4 18 4 10.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString