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 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.
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
XMLSerializer
JSON.parse()
- counterpart forJSON
documents.