There will come a time when you will have to know a url’s :
- Protocol
- Subdomain
- Domain
- Host
- Parent Domain
- TLD
- Path
- All of its query parameters
Let’s assume you want to parse below url:
https://demo.codewithmark.com/contact?id=123&name=mark
Its components would be:
- Protocol: https
- Domain: demo.codewithmark.com
- Host: codewithmark
- Parent Domain: codewithmark.com
- TLD: com
- Path : contact?id=123&name=mark
- Query String: id=123&name=mark
When You Should Parse URL
This url parsing will come in handy when you need to collect data from query string on page load for your client’s campaign ad to see how well it is doing.
Or
If you have a multi-user WordPress site and you want to add “nofollow” to all the external links.
Javascript Parse URL Function
function parseURL(url)
{
parsed_url = {}
if ( url == null || url.length == 0 )
return parsed_url;
protocol_i = url.indexOf('://');
parsed_url.protocol = url.substr(0,protocol_i);
remaining_url = url.substr(protocol_i + 3, url.length);
domain_i = remaining_url.indexOf('/');
domain_i = domain_i == -1 ? remaining_url.length - 1 : domain_i;
parsed_url.domain = remaining_url.substr(0, domain_i);
parsed_url.path = domain_i == -1 || domain_i + 1 == remaining_url.length ? null : remaining_url.substr(domain_i + 1, remaining_url.length);
domain_parts = parsed_url.domain.split('.');
switch ( domain_parts.length )
{
case 2:
parsed_url.subdomain = null;
parsed_url.host = domain_parts[0];
parsed_url.tld = domain_parts[1];
break;
case 3:
parsed_url.subdomain = domain_parts[0] == 'www' ? null : domain_parts[0];
parsed_url.host = domain_parts[1];
parsed_url.tld = domain_parts[2];
break;
case 4:
parsed_url.subdomain = domain_parts[0] == 'www' ? null : domain_parts[0];
parsed_url.host = domain_parts[1];
parsed_url.tld = domain_parts[2] + '.' + domain_parts[3];
break;
}
parsed_url.parent_domain = parsed_url.host + '.' + parsed_url.tld;
function getUrlVars(url)
{
var decodedUrl = decodeURIComponent(url);
var any_param = decodedUrl.indexOf('?');
if(any_param > 0)
{
any_param = decodedUrl.slice(decodedUrl.indexOf('?') + 1);
var hashes = any_param.split('&');
var merged = {};
var hash;
for(var i = 0; i < hashes.length; i++)
{
var res = {};
hash = hashes[i].split('=');
if(hash.length > 0)
{
res[hash[0]] = hash[1];
Object.assign(merged, res );
}
}
if(hashes.length > 0)
{
return merged;
}
}
else
{
return null;
}
}
return Object.assign(parsed_url, {qry_str : getUrlVars(url)});
}
Below is the components of: https://demo.codewithmark.com/contact?id=123&name=mark
Demo
Once you click away from the above, below it will show components of your url
How To Use The URL Parser Function:
<script type="text/javascript">
var url = parseURL('https://demo.codewithmark.com/contact?id=123&name=mark');
//out put
console.log(url.domain) //demo.codewithmark.com
console.log(url.host) //codewithmark
console.log(url.qry_str.id) //123
</script>