DOM URL parser

by Farzad YZ

HTML

<input id="input" value="https://foo.com/bar?q=1&v=2#id">
<pre id="output"></pre>

CSS

input { width: 90%; }

Babel + JSX

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();