JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Parse URL Example</title>
</head>
<body>

<h2>URL Parser</h2>
<input type="text" id="urlInput" placeholder="Enter URL to parse">
<button onclick="displayParsedUrl()">Parse URL</button>

<pre id="urlOutput"></pre>

</body>
</html>

JavaScript

function parseUrl(url) {

  var parser = document.createElement('a'),
    searchObject = {},
    queries, split, i;

  // Let the browser do the work
  parser.href = url;

  // Convert query string to object
  queries = parser.search.replace(/^\?/, '').split('&');

  for (i = 0; i < queries.length; i++) {
    split = queries[i].split(/=(.+)?/);
    searchObject[split[0]] = decodeURIComponent(split[1]);
  }

  return {
    protocol: parser.protocol,
    host: parser.host,
    hostname: parser.hostname,
    port: parser.port,
    pathname: parser.pathname,
    search: parser.search,
    searchObject: searchObject,
    hash: parser.hash
  };

}


function displayParsedUrl() {
    var url = document.getElementById('urlInput').value;
    var parsedUrl = parseUrl(url);
    document.getElementById('urlOutput').textContent = JSON.stringify(parsedUrl, null, 2);
}