JSFiddle - React, Tailwind, and code Playground

by adamwstauffer

HTML

<pre>
var el = document.createElement('a');
el.href ="http://www.somedomain.com/account/search?filter=a#top";
</pre>
<pre id="results-el"></pre>

<pre><span class="comment">// Same interface as used by the built in window.location:</span></pre>
<pre id="results-window"></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>

<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("adamwstauffer") > -1) {
       alert("your url contains the name franky");
    }
});
</script>

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><br/>';
  target.innerHTML += name + '.<span class="keyword">hostname</span>    <span class="comment">// ' + obj.hostname + '</span><br/>';
  target.innerHTML += name + '.<span class="keyword">hash</span>        <span class="comment">// ' + obj.hash + '</span><br/>';
  target.innerHTML += name + '.<span class="keyword">href</span>        <span class="comment">// ' + obj.href + '</span><br/>';
  target.innerHTML += name + '.<span class="keyword">pathname</span>    <span class="comment">// ' + obj.pathname + '</span><br/>';
  target.innerHTML += name + '.<span class="keyword">port</span>        <span class="comment">// ' + obj.port + '(port if there is one<span class="footnote">[1]</span>)</span><br/>';
  target.innerHTML += name + '.<span class="keyword">protocol</span>    <span class="comment">// ' + obj.protocol + '</span><br/>';
  target.innerHTML += name + '.<span class="keyword">search</span>      <span class="comment">// ' + obj.search + '</span><br/>';
  target.innerHTML += "\n";
}

var el = document.createElement('a');
el.href ="http://www.somedomain.com/account/search?filter=a#top"

addURLUtilsPropertiesForObj(document.getElementById('results-el'), "el", el);
addURLUtilsPropertiesForObj(document.getElementById('results-window'), "window.location", window.location);

var $dashboard = el.href.find()