Get protocol, domain, port, path, query & Hash using JS

# Table of Contents

1. Get protocol, domain, port, path, query & Hash using JS
2. Using the URL interface to get the protocol, domain, port, path, query & Hash in JS
3. Check if a URL is localhost in JavaScript

# Get protocol, domain, port, path, query & Hash using JS

You can use the window.location.protocol property to get the protocol from the current URL.

Copied!
// 👇️ Note: protocol contains the colon
const protocol = window.location.protocol;
console.log(protocol); // 👉️ http:

The location.protocol property returns a string that represents the protocol scheme of the URL, including the final colon :, e.g. http: or https:.

You can also access the protocol property on an <a> element to get the protocol of the link.

For example, if you have the following HTML.

Copied!
<a id="my-anchor" href="https://bobbyhadz.com">
  bobbyhadz.com
</a>

You can access the protocol as follows.

Copied!
const anchor = document.getElementById("my-anchor");
const result = anchor.protocol; // 👉️ 'https:'

If you need to get the port of the URL, use the window.location.port property.

Copied!
console.log(window.location.port); // 👉️ 41867

The window.location.port property returns a string that contains the port number of the URL.

If the URL doesn't contain an explicit port number, the property returns an empty string.

# Getting the host and the full URL of the page using JavaScript

If you need to get the host, use the window.location.host property.

Copied!
// 👇️ Note: protocol contains the colon
const protocol = window.location.protocol;
console.log(protocol); // http:

const host = window.location.host;
console.log(host); // localhost:41867

const fullURL =
  window.location.protocol + '//' + window.location.host;
console.log(fullURL); // http://localhost:41867

The location.host property returns a string that contains the hostname, and then if the port of the URL is nonempty, a colon : and the port of the URL.

You can also get the full URL of the page by accessing window.location.href.

Copied!
// 👇️ http://localhost:41867/
console.log(window.location.href);

The window.location.href property returns a string containing the whole URL.

There is also a window.location.origin property that achieves a similar goal.

Copied!
// 👇️ http://localhost:41867
console.log(window.location.origin);

The window.location.origin property returns a string that contains the origin of the URL.

This consists of:

• the scheme (http or https), followed by ://, followed by the domain, followed by :, followed by the port.

# Getting the query parameter string of the page using JavaScript

You can use the window.location.search property if you need to get the query parameter string of the page.

Copied!
console.log(window.location.search); // 👉️ ?page=10&limit=5

The window.location.search property returns the query string.

The query string starts with a question mark ? and is followed by key=value pairs that are separated by ampersand & symbols.

# Getting the hash of the URL using JavaScript

If you need to get the hash # of the URL, use the window.location.hash property.

Copied!
console.log(window.location.hash); // 👉️ #my-hash

The window.location.hash property returns a string containing a hash symbol # followed by the fragment identifier of the URL.

The fragment identifier is an ID on the page that the URL is trying to target.

# Getting the Path of the URL using JavaScript

If you need to get the path of the URL, use the window.location.pathname property.

Copied!
// 👇️ '/blog/javascript-get-protocol-domain-port-path-query-hash'
console.log(window.location.pathname);

The property returns a string that contains the path of the URL for the location.

If there is no path, the pathname property returns an empty string "" or a forward slash / depending on the browser's implementation.

Otherwise, a forward slash / followed by the path of the URL is returned.

Note that the query string or the hash is not included in the path.

# Using the URL interface to get the protocol, domain, port, path, query & Hash in JS

You can also use the URL interface to get the URL components.

The URL() constructor takes a URL as a parameter and returns a URL object that represents the given URL.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867/

const url = new URL(fullURL);

const protocol = url.protocol;
console.log(protocol); // 👉️ http:

const port = url.port;
console.log(port); // 👉️ 41867

const origin = url.origin;
console.log(origin); // 👉️ http://localhost:41867

Notice that we passed the current URL to the new URL() constructor via window.location.href.

You can also pass a different URL to the constructor.

Copied!
const fullURL = 'https://bobbyhadz.com';

const url = new URL(fullURL);

const protocol = url.protocol;
console.log(protocol); // 👉️ https:

const port = url.port;
console.log(port); // 👉️ ""

const origin = url.origin;
console.log(origin); // 👉️ https://bobbyhadz.com

The available properties on the URL object are:

• the hash # - a string containing a hash symbol # followed by the fragment identifier of the URL.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867#my-hash

const url = new URL(fullURL);

const hash = url.hash;
console.log(hash); // 👉️ #my-hash

• the host - a string containing the domain followed by a : and the port of the URL (if one exists).

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const host = url.host;
console.log(host); // 👉️ localhost:41867

• the hostname - a string containing the domain of the URL.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const hostname = url.hostname;
console.log(hostname); // 👉️ localhost

• href - a stringifier that returns a string containing the whole URL.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const href = url.href;
console.log(href); // 👉️ http://localhost:41867/

• origin - a string containing the origin of the URL (the scheme, domain and port).

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const origin = url.href;
console.log(origin); // 👉️ http://localhost:41867/

• pathname - a string containing a leading forward slash / and then the path of the URL (excluding the query string or the hash).

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867/blog/reverse-a-string

const url = new URL(fullURL);

const path = url.pathname;
console.log(path); // 👉️ /blog/reverse-a-string

• port - a string containing the port number of the URL.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const port = url.port;
console.log(port); // 👉️ 41867

• protocol - a string containing the protocol scheme of the URL (http or https) followed by a colon :.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867

const url = new URL(fullURL);

const protocol = url.protocol;
console.log(protocol); // 👉️ http:

• search - the URL's query string beginning with a leading question mark ? character.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867?page=10&limit=5

const url = new URL(fullURL);

const queryString = url.search;
console.log(queryString); // 👉️ ?page=10&limit=5

• searchParams - a URLSearchParams object that can be used to access individual query parameters found in the search property.

Copied!
const fullURL = window.location.href;
console.log(fullURL); // 👉️ http://localhost:41867?page=10&limit=5

const url = new URL(fullURL);

console.log(url.searchParams.get('page')); // 10
console.log(url.searchParams.get('limit')); // 5

I've also written an article on how to remove http or https from a URL using JavaScript.

# Check if a URL is localhost in JavaScript

Use the includes() method to check if a URL is localhost.

The includes method will return true if the URL is localhost, otherwise false is returned.

Copied!
function isLocalhost(url) {
  return url.includes('localhost') || url.includes('127.0.0.1');
}

// 👇️ true
console.log(isLocalhost('http://localhost:3000/'));

// 👇️ false
console.log(isLocalhost('https://bobbyhadz.com'));

You can use window.location.href instead of the hardcoded URL to get the current URL.

We created a reusable function that checks if a URL is localhost or not.

The String.includes() method returns true if the supplied substring is contained in the string and false otherwise.

We used the logical OR (||) operator, so for the function to return true, either condition has to be met.

1. The URL has to contain the string localhost
2. Or it has to contain the string 127.0.0.1

# Check if a URL is localhost using indexOf()

Alternatively, you can use the String.indexOf() method.

If the indexOf() method returns -1 for the strings localhost and 127.0.0.1, the URL is not localhost.

Copied!
function isLocalHost(url) {
  return (
    url.indexOf('localhost') !== -1 ||
    url.indexOf('127.0.0.1') !== -1
  );
}

// 👇️ true
console.log(isLocalHost('http://localhost:3000/'));

// 👇️ false
console.log(isLocalHost('http://example.com'));tp://example.com'));

The String.indexOf() method returns the index of the first occurrence of a substring in a string.

If the substring is not contained in the string, the method returns -1.

If either of the calls to the indexOf() method returns an index that is not equal to -1, then the URL is localhost.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Get the YouTube video ID from a URL using JavaScript
• How to Remove the Query String from a URL in JavaScript
• Check if a URL is an Image using JavaScript