Skip to content

Commit

Permalink
Add separate page for DOMParser.parseFromString (#2957)
Browse files Browse the repository at this point in the history 
* Split out DOMParser.parseFromString; fix various errors and omissions in the DOMParser docs

* Escape HTML in examples

* Fix fixable flaws

* "a HTML Document" -> "an HTML Document"

Co-authored-by: Michael[tm] Smith <mike@w3.org>

* "a HTML" -> "an HTML"

Co-authored-by: Michael[tm] Smith <mike@w3.org>

* Code formatting for MIME type

Co-authored-by: Michael[tm] Smith <mike@w3.org>

Co-authored-by: Will <>
Co-authored-by: Michael[tm] Smith <mike@w3.org>
  • Loading branch information
@wbamberg @sideshowbarker
wbamberg and sideshowbarker authored Mar 9, 2021
1 parent 8dbb0d6 commit 39c006a
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 168 deletions.
25 changes: 23 additions & 2 deletions files/en-us/web/api/domparser/domparser/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,37 @@

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">var parser = new DOMParser();</pre>
<pre class="brush: js">const parser = new DOMParser();</pre>

<h3 id="Parameters">Parameters</h3>

<p>None.</p>

<h3 id="Return_Value">Return Value</h3>
<h3>Return value</h3>

<p>A new <code><a href="/en-US/docs/Web/API/DOMParser">DOMParser</a></code> object. This object can be used to parse the text of a document using the <code>parseFromString()</code> method.</p>


<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#dom-domparser-constructor', 'DOMParser()')}}
</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("api.DOMParser.DOMParser")}}</p>
206 changes: 40 additions & 166 deletions files/en-us/web/api/domparser/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,21 @@
title: DOMParser
slug: Web/API/DOMParser
tags:
- API
- DOM
- DOM Parsing
- Document
- HTML
- HTMLDocument
- MakeBrowserAgnostic
- NeedsMarkupWork
- Parsing
- Reference
- SVG
- XML
- XMLDocument
- API
- DOM
- DOM Parsing
- Document
- HTML
- HTMLDocument
- Parsing
- Reference
---
<p>{{APIRef("DOM")}}</p>

<p><span class="seoSummary">The <strong><code>DOMParser</code></strong> interface provides
the ability to parse {{Glossary("XML")}} or {{Glossary("HTML")}} source code from a
string into a DOM {{domxref("Document")}}.</span></p>

<div class="note">
<p><strong>Note:</strong> {{domxref("XMLHttpRequest")}} can parse XML and HTML directly
from a URL-addressable resource, returning a <code>Document</code> in its
{{domxref("XMLHttpRequest.response", "response")}} property.</p>
</div>

<p>You can perform the opposite operation—converting a DOM tree into XML or HTML
source—using the {{domxref("XMLSerializer")}} interface.</p>

Expand All @@ -36,169 +25,54 @@
{{domxref("Element.outerHTML", "outerHTML")}} properties. These properties can also be
read to fetch HTML fragments corresponding to the corresponding DOM subtree.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js">const <var>domparser</var> = new DOMParser()</pre>

<h2 id="Methods">Methods</h2>

<h3 id="domxrefDOMParser.parseFromString_1">{{domxref("DOMParser.parseFromString()", "",
"", "1")}}</h3>
<p>Note that {{domxref("XMLHttpRequest")}} can parse XML and HTML directly
from a URL-addressable resource, returning a <code>Document</code> in its
{{domxref("XMLHttpRequest.response", "response")}} property.</p>

<h4 id="Syntax_2">Syntax</h4>
<h2 id="Constructor">Constructor</h2>

<pre
class="brush: js">const <var>doc</var> = domparser.parseFromString(<var>string, <var>mimeType</var>)</var></pre>

<h4 id="Return">Return</h4>

<p>Either {{domxref("Document")}} or {{domxref("XMLDocument")}} depending on the
<strong><code><a href="#argument02">mimeType</a></code></strong> argument.</p>

<h4 id="Parameters">Parameters</h4>
<dl>
<dt>{{domxref("DOMParser.DOMParser","DOMParser()")}}</dt>
<dd>Creates a new <code>DOMParser</code> object.</dd>
</dl>

<p>This method has 2 parameters (both required):</p>
<h2 id="Methods">Methods</h2>

<dl>
<dt><code><var>string</var></code></dt>
<dd>The {{domxref("DOMString")}} to be parsed. It must contain either
{{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}}, or
{{Glossary("svg")}} document.</dd>
<dt id="Argument02"><code><var>mimeType</var></code></dt>
<dd>
<p>A {{domxref("DOMString")}}. This string determines a class of the method's return
value. The possible values are the following:</p>

<table class="standard-table" style="max-width: 60ch;">
<thead>
<tr>
<th scope="col"><code><var>mimeType</var></code></th>
<th scope="col"><code><var>doc</var>.constructor</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text/html</code></td>
<td><code>{{domxref("Document")}}</code></td>
</tr>
<tr>
<td><code>text/xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>application/xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>application/xhtml+xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
<tr>
<td><code>image/svg+xml</code></td>
<td><code>{{domxref("XMLDocument")}}</code></td>
</tr>
</tbody>
</table>
</dd>
<dt>{{domxref("DOMParser.parseFromString()")}}</dt>
<dd>Parses a string using either the HTML parser or the XML parser, returning an {{domxref("HTMLDocument")}} or {{domxref("XMLDocument")}}.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Parsing_XML">Parsing XML</h3>

<p>Once you have created a parser object, you can parse XML from a string using the
<code>parseFromString()</code> method:</p>
<h3>Parsing XML, SVG, and HTML</h3>

<pre class="brush: js">let <var>parser</var> = new DOMParser()
let <var>doc</var> = parser.parseFromString(<var>stringContainingXMLSource</var>, "application/xml")
</pre>
<p>This example shows how to parse XML, SVG, and HTML. Note that a MIME type of
<code>text/html</code> will invoke the HTML parser, and any of the other MIME types
that are accepted by this method will invoke the XML parser.</p>

<h4 id="Error_handling">Error handling</h4>
<pre class="brush: js">const parser = new DOMParser();

<p>Note that if the parsing process fails, the <code>DOMParser</code> does not throw an
exception, but instead returns an error document:</p>

<pre class="brush:xml">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
<var>(error description)</var>
&lt;sourcetext&gt;<var>(a snippet of the source XML)</var>&lt;/sourcetext&gt;
&lt;/parsererror&gt;
</pre>
const xmlString = "&lt;warning&gt;Beware of the tiger&lt;/warning&gt;";
const doc1 = parser.parseFromString(xmlString, "application/xml");
// XMLDocument

<p>The parsing errors are also reported to the <a href="/en-US/docs/Error_Console"
title="Error Console">Error Console</a>, with the document URI (see below) as the
source of the error.</p>
const svgString = "&lt;circle cx=\"50\" cy=\"50\" r=\"50\"/&gt;";
const doc2 = parser.parseFromString(svgString, "image/svg+xml");
// XMLDocument

<h3 id="Parsing_SVG_or_HTML">Parsing SVG or HTML</h3>
const htmlString = "&lt;strong&gt;Beware of the leopard&lt;/strong&gt;";
const doc3 = parser.parseFromString(htmlString, "text/html");
// HTMLDocument

<p>The <code>DOMParser</code> can also be used to parse an SVG document
{{geckoRelease("10.0")}} or an HTML document {{geckoRelease("12.0")}}. There are three
different results possible, selected by the MIME type given.</p>
console.log(doc1.documentElement.textContent)
// "Beware of the tiger"

<ol>
<li>If the MIME type is <code>text/xml</code>, the result will be an
<code>XMLDocument</code></li>
<li>If the MIME type is <code>image/svg+xml</code>, the result will be an
<code>SVGDocument</code></li>
<li>If the MIME type is <code>text/html</code>, the result will be an
<code>HTMLDocument</code></li>
</ol>

<pre class="brush: js">let parser = new DOMParser()
let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
// returns a Document, but not an SVGDocument nor an HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml")
// returns a SVGDocument, which also is a Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html")
// returns an HTMLDocument, which also is a Document.
</pre>
console.log(doc2.firstChild.tagName);
// "circle"

<h2 id="DOMParser_HTML_extension">DOMParser HTML extension</h2>

<pre class="brush: js">/*
* DOMParser HTML extension
* 2012-09-04
*
* By Eli Grey, http://eligrey.com
* Public domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/

/*! @source https://gist.github.com/1129031 */
/*global document, DOMParser*/

(function(DOMParser) {
"use strict";

var proto = DOMParser.prototype,
nativeParse = proto.parseFromString;

// Firefox/Opera/IE throw errors on unsupported types
try {
// WebKit returns null on unsupported types
if ((new DOMParser()).parseFromString("", "text/html")) {
// text/html parsing is natively supported
return;
}
} catch (ex) {}

proto.parseFromString = function(markup, type) {
if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
var doc = document.implementation.createHTMLDocument("");
if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
doc.documentElement.innerHTML = markup;
} else {
doc.body.innerHTML = markup;
}
return doc;
} else {
return nativeParse.apply(this, arguments);
}
};
}(DOMParser));
console.log(doc3.body.firstChild.textContent);
// "Beware of the leopard"
</pre>

<h2 id="Specifications">Specifications</h2>
Expand Down Expand Up @@ -228,7 +102,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Parsing_and_serializing_XML">Parsing and serializing XML</a>
<li><a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a>
</li>
<li>{{domxref("XMLHttpRequest")}}</li>
<li>{{domxref("XMLSerializer")}}</li>
Expand Down
Loading

0 comments on commit 39c006a

Please sign in to comment.