<div id="block">

  <a href="https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top" id="url">https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top</a>

<br /><br /><label for="host">Host:</label> <input type="text" id="host" />
<br /><label for="path">Path:</label> <input type="text" id="path" />
<br /><label for="query">Query String:</label> <input type="text" id="query" />
<br /><label for="hash">Hash:</label> <input type="text" id="hash" />
</div>
html{
    background-color:#fff;
    font:14px/1.4 sans-serif;
    color:#bbb;
}
div#block {
  margin: 20px 10px;
}
input{
    font:inherit;
    border:1px solid #ccc;
    border-radius:2px;
    padding:5px 8px;
    width: 500px;
}
input#url{
  border:1px solid #000;
}
label{
    width:100px;
    display:inline-block;
    text-align:right;
    margin: 10px;
}
var href = document.getElementById('url');
  
document.getElementById('host').value = href.hostname;
document.getElementById('path').value = href.pathname;
document.getElementById('query').value = href.search;
document.getElementById('hash').value = href.hash;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.