DOM URL parser

by Jesse Johnson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/amazeui/2.7.2/js/amazeui.min.js"></script>
<link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css">
<form class="am-form">
  <fieldset>
    <legend>DOM URL Parser</legend>
    <div class="am-form-group">
      <label for="input">URL</label>
      <input type="email" id="input" value="https://user:[email protected]:80/bar?q=1&v=2#id">
    </div>
  </fieldset>
</form>

<pre id="output"></pre>

TypeScript

const parser = document.createElement('a');

const url = {
	parse(url) {
  	parser.href = url;
    let out = {};
    let props = 'username password host hostname port protocol origin pathname search hash'.split(' ');
    for (let i=props.length; i--; ) out[props[i]] = parser[props[i]];
    return out;
  },
  stringify(obj) {
  	parser.href = '';
  	for (let i in obj) parser[i] = obj;
    return parser.href;
  }
};

input.oninput = () => {
	output.textContent = JSON.stringify(url.parse(input.value),0,2);
};

input.oninput();