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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
window.location.href will return the entire url of the current document URL.
1 2 | 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.
1 2 | 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.
1 2 | 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.
1 2 | 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.
1 2 | var currentPort = window.location.port; // Output: 80 |
6. pathname
window.location.pathname will return the pathname of the current document URL.
1 2 | var currentPathName = window.location.pathname; // Output: /examples |
7. search
window.location.search will return the queryString part of the current document URL.
1 2 | var currentSearchString = window.location.search; // Output: ?q=pqr |
8. hash
window.location.hash will return the anchor part of the current document URL.
1 2 | var currenthash = window.location.hash; // Output: #abc |
Hope this will help you!
Thanks for reading and happy coding!
I’m impressed, I must say. Rarely do I encounter a
blog that’sboth educative and entertaining, and lett me tell you,
you’ve hit the nail on the head. The problem is something which too few folks
are speaking intelligently about. I am very hhappy that I
stumbled across this in my search for something regarding this.
I’m glad you like the article. We are sharing the knowledge everyday so please share it with your friends.
Like & Share it. Happy Coding..!!!