JSFiddle - React, Tailwind, and code Playground

by nchaves

HTML

<pre id="results-URL"></pre>

<pre><span class="comment">
// <span class="footnote">[1]: </span>Depends on browser.
// - IE appears to always include it (not sure about location element).
// - Other browsers erase it if it is a port the browser can assume 80 (http) or 443 (https).
    // See <a href="http://jessepollak.me/chrome-was-wrong-ie-was-right/">http://jessepollak.me/chrome-was-wrong-ie-was-right/</a>
</span></pre>

CSS

html { background:#222; }
a { color:#F52769; text-decoration:underline; }
pre { font-family:'Source Code Pro', 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace; font-size:0.8em; color:#EEE; }
.keyword { color:#60D9EF; }
.comment { color:#888; font-weight:italic; }
.footnote { color:#E6DB74; }

JavaScript

function addURLUtilsPropertiesForObj(target, name, obj) {
  target.innerHTML += name + '.<span class="keyword">host</span>        <span class="comment">// ' + obj.host + ' (includes port if there is one<span class="footnote">[1]</span>)</span>\n';
  target.innerHTML += name + '.<span class="keyword">hostname</span>    <span class="comment">// ' + obj.hostname + '</span>\n';
  target.innerHTML += name + '.<span class="keyword">hash</span>        <span class="comment">// ' + obj.hash + '</span>\n';
  target.innerHTML += name + '.<span class="keyword">href</span>        <span class="comment">// ' + obj.href + '</span>\n';
  target.innerHTML += name + '.<span class="keyword">port</span>        <span class="comment">// ' + obj.port + '(port if there is one<span class="footnote">[1]</span>)</span>\n';
  target.innerHTML += name + '.<span class="keyword">protocol</span>    <span class="comment">// ' + obj.protocol + '</span>\n';
  target.innerHTML += name + '.<span class="keyword">search</span>      <span class="comment">// ' + obj.search + '</span>\n';
  target.innerHTML += "\n";
}

var resultsURL = document.getElementById('results-URL');
try {
    var aURLObject = new URL("http://www.somedomain.com/account/search?filter=a#top");
    
    resultsURL.innerHTML = 'var aURLObject = new URL("http://www.somedomain.com/account/search?filter=a#top");\n\n';
    resultsURL.innerHTML += 'aURLObject             <span class="comment">// ' + aURLObject + '</span>\n';
    addURLUtilsPropertiesForObj(resultsURL, "aURLObject", aURLObject);
} catch (e) {
    resultsURL.innerHTML = '<span class="comment">// No support for the URL constructor:\n//  Error Message: ' + e.message + '</span>';
}