Parse URL hostname, path, search in Javascript

JavaScript

In this post, we are going to learn how to Parse URL host path, search, hash in Javascript with programs examples

1. Parse URL hostname,serach hash in JavaScript

In this example, we are using a new URL() constructor that returns a newly created URL object representing the URL defined by the parameters like href, host, pathname, search, hash. The URL constructor is available in modern browsers.

  • url.search : To get raw query string
  • url.searchParams: It is an instance of URLSearchParams to get query string parameters
  • url.hostname : to get the hostname
  • url.pathname : to get the pathname
  • url.hash : to get the the hash value
const url = new URL('https://devenum.com/python-tutorial/?s=create+file+in+python');
console.log('href:',url.href); 
console.log('URL Host:',url.host); 
console.log('URL PathName:',url.pathname); 
console.log('Serach Query:',url.search); 
console.log('Serach params:',url.searchParams);
console.log('URL hash:',url.hash);

Output

href: https://devenum.com/python-tutorial/?s=create+file+in+python
URL Host: devenum.com
URL PathName: /python-tutorial/
Serach Query: ?s=create+file+in+python
Serach params: URLSearchParams { 's' => 'create file in python' }
URL hash:

2. Parse URL hostname,search hash in JavaScript

In this example, we have created a dom object and set its href property, and later accessing the property of URL that includes protocol, hostname, port, pathname, search query, hash, and host 

var URL = document.createElement('a');
URL.href = "http://devenum.com:5002/python-tutorial/?s=create+file+in+python#123";

console.log(URL.protocol); 
console.log(URL.hostname); 
console.log(URL.port);     
console.log(URL.pathname); 
console.log(URL.search);   
console.log(URL.hash);     
console.log(URL.host);

Output

"http:"
"devenum.com"
"5002"
"/python-tutorial/"
"?s=create+file+in+python"
"#123"
"devenum.com:5002"

3. Parse URL hostname,serach hash in JavaScript Using Regexp

In this example, we are using regexp to parse the URL in JavaScript.We can access the relative URL by using this regular expression. To get the relative path this regular expression can be used 

/^(?:(https?\:)\/\/)?(([^:\/?#])(?:\:([0-9]+))?)([\/]{0,1}[^?#])(\?[^#]|)(#.|)$/

The detail of regular Expression is 

'^(https?:)//', // protocol
    '(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
    '(/{0,1}[^?#]*)', // pathname
    '(\\?[^#]*|)', // search query
    '(#.*|)$' // hash

JavaScript Program to parse URL

function ParseURL(href) 
{
    var regexp = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
    return regexp && {
        href: href,
        protocol: regexp[1],
        host: regexp[2],
        hostname: regexp[3],
        port: regexp[4],
        pathname: regexp[5],
        search: regexp[6],
        hash: regexp[7]
    }
}

url = ParseURL("https://devenum.com/python-tutorial/?s=create+file+in+python");console.log('href:',url.href); 
console.log('URL Host:',url.host); 
console.log('URL PathName:',url.pathname); 
console.log('Serach Query:',url.search); 
console.log('URL hash:',url.hash);

Output

href: https://devenum.com/python-tutorial/?s=create+file+in+python#123
URL Host: devenum.com
URL PathName: /python-tutorial/
Serach Query: ?s=create+file+in+python
URL hash: #123

Related Posts