parse Url

by Евгений

HTML

<a class="link1" href="http://site.com:81/path/page?a=1&b=2#hash">parse a.href</a>
<a class="link2" href="#">parse string</a>
<a class="link3" href="#">parse location</a>

<div class="res result"></div>
<div class="res debug"></div>

SCSS

.res {
  border: 1px solid grey;
  background-color: #dbdbdb;
  padding: 0 4px 4px 4px;
  line-height: 1.5rem;
  &::before {
    display: block;
    padding: 4px;
    margin: 0 -4px;
    background-color: grey;
  }
  &:empty { display: none; }
}

.result::before { content: 'result:'; }
.debug::before { content: 'debug:'; }
.resume::before { content: 'resume:'; }

JavaScript

const log = (selector, result) => { document.querySelector(selector).innerHTML = result};

const parseUrl = (url) => {
  const a = new URL(url);
  return 'href: ' + a.href + '<br>' +           // the full URL
    'protocol: ' + a.protocol + '<br>' +       // http:
    'hostname: ' + a.hostname + '<br>' +       // site.com
    'port: '+ a.port + '<br>' +           // 81
    'pathname: ' + a.pathname + '<br>' +       // /path/page
    'search: ' + a.search + '<br>' +         // ?a=1&b=2
    'hash: '+ a.hash                      // #hash
}

document.querySelector('.link1')
	.addEventListener('click', 
    function(event) {
    	event.preventDefault();
    	log('.debug', this.href);
      log('.debug', parseUrl(this.href))
    }
  );
  
document.querySelector('.link2')
	.addEventListener('click', 
    (event) => {
    	event.preventDefault();
    	const url = 'http://site.com:81/path/page?a=1&b=2#hash';
    	log('.result', url);
      log('.debug', parseUrl(url));
    }
  );
  
document.querySelector('.link3')
	.addEventListener('click', 
    (event) => {
    	event.preventDefault();
    	log('.result', location);
      log('.debug', parseUrl(location));
    }
  );