Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The following works in most common browsers, but not some. This is how simple it <strong>should</strong> be (but isn't):</p> <pre><code>// Fails if UA doesn't support parseFromString for text/html (e.g. IE) function htmlToDoc(markup) { var parser = new DOMParser(); return parser.parseFromString(markup, "text/html"); } var htmlString = "&lt;title&gt;foo bar&lt;/title&gt;&lt;div&gt;a div&lt;/div&gt;"; alert(htmlToDoc(htmlString).title); </code></pre> <p>To account for user agent vagaries, the following may be better (please note attribution):</p> <pre><code>/* * DOMParser HTML extension * 2012-02-02 * * By Eli Grey, http://eligrey.com * Public domain. * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. * * Modified to work with IE 9 by RobG * 2012-08-29 * * Notes: * * 1. Supplied markup should be avalid HTML document with or without HTML tags and * no DOCTYPE (DOCTYPE support can be added, I just didn't do it) * * 2. Host method used where host supports text/html */ /*! @source https://gist.github.com/1129031 */ /*! @source https://developer.mozilla.org/en-US/docs/DOM/DOMParser */ /*global document, DOMParser*/ (function(DOMParser) { "use strict"; var DOMParser_proto; var real_parseFromString; var textHTML; // Flag for text/html support var textXML; // Flag for text/xml support var htmlElInnerHTML; // Flag for support for setting html element's innerHTML // Stop here if DOMParser not defined if (!DOMParser) return; // Firefox, Opera and IE throw errors on unsupported types try { // WebKit returns null on unsupported types textHTML = !!(new DOMParser).parseFromString('', 'text/html'); } catch (er) { textHTML = false; } // If text/html supported, don't need to do anything. if (textHTML) return; // Next try setting innerHTML of a created document // IE 9 and lower will throw an error (can't set innerHTML of its HTML element) try { var doc = document.implementation.createHTMLDocument(''); doc.documentElement.innerHTML = '&lt;title&gt;&lt;/title&gt;&lt;div&gt;&lt;/div&gt;'; htmlElInnerHTML = true; } catch (er) { htmlElInnerHTML = false; } // If if that failed, try text/xml if (!htmlElInnerHTML) { try { textXML = !!(new DOMParser).parseFromString('', 'text/xml'); } catch (er) { textHTML = false; } } // Mess with DOMParser.prototype (less than optimal...) if one of the above worked // Assume can write to the prototype, if not, make this a stand alone function if (DOMParser.prototype &amp;&amp; (htmlElInnerHTML || textXML)) { DOMParser_proto = DOMParser.prototype; real_parseFromString = DOMParser_proto.parseFromString; DOMParser_proto.parseFromString = function (markup, type) { // Only do this if type is text/html if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { var doc, doc_el, first_el; // Use innerHTML if supported if (htmlElInnerHTML) { doc = document.implementation.createHTMLDocument(""); doc_el = doc.documentElement; doc_el.innerHTML = markup; first_el = doc_el.firstElementChild; // Otherwise use XML method } else if (textXML) { // Make sure markup is wrapped in HTML tags // Should probably allow for a DOCTYPE if (!(/^&lt;html.*html&gt;$/i.test(markup))) { markup = '&lt;html&gt;' + markup + '&lt;\/html&gt;'; } doc = (new DOMParser).parseFromString(markup, 'text/xml'); doc_el = doc.documentElement; first_el = doc_el.firstElementChild; } // RG: I don't understand the point of this, I'll leave it here though // In IE, doc_el is the HTML element and first_el is the HEAD. // // Is this an entire document or a fragment? if (doc_el.childElementCount == 1 &amp;&amp; first_el.localName.toLowerCase() == 'html') { doc.replaceChild(first_el, doc_el); } return doc; // If not text/html, send as-is to host method } else { return real_parseFromString.apply(this, arguments); } }; } }(DOMParser)); // Now some test code var htmlString = '&lt;html&gt;&lt;head&gt;&lt;title&gt;foo bar&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;a div&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;'; var dp = new DOMParser(); var doc = dp.parseFromString(htmlString, 'text/html'); // Treat as an XML document and only use DOM Core methods alert(doc.documentElement.getElementsByTagName('title')[0].childNodes[0].data); </code></pre> <p>Don't be put off by the amount of code, there are a lot of comments, it can be shortened quite a bit but becomes less readable.</p> <p>Oh, and if the markup is valid XML, life is much simpler:</p> <pre><code>var stringToXMLDoc = (function(global) { // W3C DOMParser support if (global.DOMParser) { return function (text) { var parser = new global.DOMParser(); return parser.parseFromString(text,"application/xml"); } // MS ActiveXObject support } else { return function (text) { var xmlDoc; // Can't assume support and can't test, so try..catch try { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } catch (e){} return xmlDoc; } } }(this)); var doc = stringToXMLDoc('&lt;books&gt;&lt;book title="foo"/&gt;&lt;book title="bar"/&gt;&lt;book title="baz"/&gt;&lt;/books&gt;'); alert( doc.getElementsByTagName('book')[2].getAttribute('title') ); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload