DOMParser: parseFromString() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

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

Note: The Document.parseHTMLUnsafe() static method provides an ergonomic alternative for parsing HTML strings into a Document.

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

Specification
HTML Standard
# dom-domparser-parsefromstring-dev

Browser compatibility

BCD tables only load in the browser

See also