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
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 anHTMLDocument
. 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
, andimage/svg+xml
) are functionally equivalent. They all invoke the XML parser, and the method will return aXMLDocument
.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.
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.
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
XMLSerializer
JSON.parse()
- counterpart forJSON
documents.