Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add separate page for DOMParser.parseFromString #2957

Merged
merged 6 commits into from
Mar 9, 2021
Merged

Add separate page for DOMParser.parseFromString #2957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
577c8e7
Split out DOMParser.parseFromString; fix various errors and omissions…
Mar 9, 2021
202df71
Escape HTML in examples
Mar 9, 2021
d09d91e
Fix fixable flaws
Mar 9, 2021
07ad44a
"a HTML Document" -> "an HTML Document"
wbamberg Mar 9, 2021
24de6b3
"a HTML" -> "an HTML"
wbamberg Mar 9, 2021
b63b9ca
Code formatting for MIME type
wbamberg Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions files/en-us/web/api/domparser/domparser/index.html
View file
Open in desktop
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
Open in desktop
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