How To Get URL Parts in JavaScript
JavaScript Tutorial Describing the Window.location Object
Mar 21, 2008
This JavaScript tutorial article concentrates on:
- Obtaining the URL from the window.location object
- Changing the current location with window.location.href and window.location.reload
- Splitting and rebuilding URLs with Array and String splitting functions
The first step is understanding the JavaScript Location object.
The Location Object
This is a JavaScript class that is used to store URLs. It comes with properties that represent each part of the URL, and can be updated by changing the href property. The key properties that this article deals with are:
- location.href : the full URL
- location.protocol, location.host & location.pathname : the parts of the URL
In addition there are various methods that
- location.reload
- location.replace
These shall be discussed with reference to the window.location object.
The window.location Object
The window.location object is the specific object that stores the URL of the currently loaded page. If a JavaScript function changes the window.location.href property, then the page should reload with the new location.
However, this may not always be the case, and so the location.reload and location.replace methods have also been provided in the Location object. These were introduced in JavaScript 1.2, and give a little more control over the way that browsing history and current page location URLs are handled. In some cases it may not be enough to set the window.location.href, and so calling window.location.reload will force the page to be refreshed.
The window.location.replace method is used to overwrite the history entry in the browser, for the current page.
Splitting and Rebuilding URLs
The URL is stored as the following parts:
Each part can be accessed using the appropriate property of the Location object:
- location.protocol : for web pages, the value http
- location.host : for this site www.suite101.com
- location.pathname : the path to a page i.e. mypages/page1.html
It is important to note that:
- The protocol is store without the : or // that make up the whole URL
- The host will contain a port, where appropriate
- the pathname does not contain the leading /
So, to rebuild a URL based on the above information, code such as the following can be used:
This makes it very easy to create inline links that are context sensitive, and that refer pages that should exist on the server. For example, a site might have a tag page that collects all content that has the tag marketing associated with it. If the word marketing were to appear in a block of text, then JavaScript could be used to pre-process that block of text, and add a URL based on the current URL, but containing the reference to the marketing tag page.
One final note is that the pathname will be a / separated string, which can be split into an array of strings using the following code:
Using this approach, it is easy to rebuild URLs, as each component will be contained in one array element. Again, however, it is necessary to put the / back:
for ( i = 0; i pathArray.length; i++ ) {
newPathname += "/";
newPathname += pathArray[i];
}
The JavaScript Split List or String article contains more details about using arrays and strings in this way.
