Get Current URL in JavaScript

Sometimes, we need to get the current page URL that is shown in the browser URL window so today we explain to you how to get Current URL in web browser using JavaScript.

Get Current URL in JavaScript, Get Current URL in Web Browser using JavaScript, get the current browser URL using JavaScript, JavaScript Window Location, Get full web page URL from the address bar, location property.

Checkout more articles on JavaScript

• Convert a String to a Number in JavaScript
• Default Parameters in JavaScript
• Replace all occurrences of a string in JavaScript
• Object doesn't support property or method ‘find’ in IE

URL is composed of many different sub parts and the location object contains information about the current URL.

If current url is `https://www.cluemediator.com:80/examples?q='pqr'#abc` and we hit the `window.location` command in console window then we will get below output.

window.location

// Output:

Location {replace: ƒ, href: "https://www.cluemediator.com/category/javascript", ancestorOrigins: DOMStringList, origin: "https://www.cluemediator.com", protocol: "http:", …}
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
hash: "#abc"
host: "www.cluemediator.com:80"
hostname: "www.cluemediator.com"
href: "https://www.cluemediator.com:80/examples?q='pqr'#abc"
origin: "https://www.cluemediator.com"
pathname: "/examples"
port: ""
protocol: "https:"
reload: ƒ reload()
replace: ƒ ()
search: "?q=pqr"
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

Now we will explain the properties of location object. So assume that the current URL is `https://www.cluemediator.com:80/examples?q='pqr'#abc`.

Property of location object

1. href
2. protocol
3. host
4. hostname
5. port
6. pathname
7. search
8. hash

1. href

window.location.href will return the entire url of the current document URL.

var currentURL = window.location.href;
// Output: https://cluemediator.com:80/examples?q='pqr'#abc

2. protocol

window.location.protocol will return the protocol of the current document URL.

var currentProtocol = window.location.protocol;
// Output: https

3. host

window.location.host will return the host part and port number of the current document URL.

var currentHost = window.location.host;
// Output: www.cluemediator.com:80

4. hostname

window.location.hostname will return only the hostname of the current document URL.

var currentHostName = window.location.hostname;
// Output: www.cluemediator.com

5. port

window.location.port will return only the port number of the current document URL.

var currentPort = window.location.port;
// Output: 80

6. pathname

window.location.pathname will return the pathname of the current document URL.

var currentPathName = window.location.pathname;
// Output: /examples

7. search

window.location.search will return the queryString part of the current document URL.

var currentSearchString = window.location.search;
// Output: ?q=pqr

8. hash

window.location.hash will return the anchor part of the current document URL.

var currenthash = window.location.hash;
// Output: #abc

Hope this will help you!

Thanks for reading and happy coding!