JSFiddle - React, Tailwind, and code Playground

by naryad

HTML

<p>
    <a href="http://stackoverflow.com/questions/7474710/can-i-load-an-entire-html-document-into-a-document-fragment-in-internet-explorer/7539198#7539198">Demo of answer provided at Stack Overflow</a>
    &bull; <a href="http://rob.lekensteyn.nl/html-sanitiser.js">Source</a>
</p>
<div id=out1>Loading...</div><br /><div id=out2>Loading...</div>

CSS

div {
    font-family: monospace;
    font-size: 15px;
    white-space: pre-wrap;
    /*Change white-space to `nowrap` if you want to compare line-by-line*/
}
html,body{margin:2px;padding:0}

JavaScript

//Test case
try{string2dom("<html><head><title>Test</title></head></html>", function(doc, destroy){
         document.getElementById("out1").innerHTML = ("[string2dom] document.title of a fetched DOM tree:<br /><strong>Expected result:</strong> Test<br /><strong>Actual result:</strong>   "+doc.title); /* Alert: "Test" */
         destroy();
});}catch(e){alert("An error has occured"+ e)}
try{
     var test = sanitiseHTML("<div id='secret' onclick='tss' style='expression(0)' ><input  type='text' value='><' onclick='onclick=\"foo()\"' onnothing=  onmousemove=foo() onnothing style=background:url('red')></div>\n<a href='meh meh'<img src='doo'>");
document.getElementById("out2").innerHTML=("[sanitiseHTML]:<br /><strong>Input:</strong><br />&lt;div id='secret' onclick=tss' style='expression(0)' &gt;&lt;input type='text' value='&gt;&lt;' onclick='onclick=&quot;foo()&quot;' onnothing= onmousemove=foo onnothing style=background:url('red')&gt;&lt;/div&gt;<br />&lt;a href=&quot;meh meh&quot;&lt;img src='doo'&gt;<br /><strong>Output:</strong><br />" + test.replace(/</g,"&lt;").replace(/>/g,"&gt;") +"<br /><strong>Expected output:</strong><br />"+"&lt;!--&quot;'--&gt;&lt;div id='secret' data-onclick='tss' style='data-expression(0)' &gt;&lt;!--&quot;'--&gt;&lt;input type='text' value='&gt;&lt;' data-onclick='onclick=&quot;foo()&quot;' onnothing= data-onmousemove=foo() onnothing style=background:data-url('red')&gt;&lt;/div&gt;\n&lt;!--&quot;'--&gt;&lt;a data-href='meh meh'&lt;!--&quot;'--&gt;&lt;img data-src='doo'&gt;");
}catch(e){alert("An unexpected error has occured: "+e)}
    /*
     @param String html    The string with HTML which has be converted to a DOM object
     @param func callback  (optional) Callback(HTMLDocument doc, function destroy)
     @returns              undefined if callback exists, else: Object
                            HTMLDocument doc  DOM fetched from Parameter:html
                            function destroy  Removes HTMLDocument doc.         */
  ...