The parseFromString()
method of the DOMParser
interface parses a string containing either HTML or XML, returning an HTMLDocument
or an XMLDocument
.
The parseFromString()
method of the DOMParser
interface parses a string containing either HTML or XML, returning an HTMLDocument
or an XMLDocument
.
js
parseFromString(string, mimeType)
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.
An HTMLDocument
or an XMLDocument
, depending on the mimeType
argument.
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"
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.
Specification |
---|
HTML Standard # dom-domparser-parsefromstring-dev |
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 |
XMLSerializer
JSON.parse()
- counterpart for JSON
documents.
© 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