As part of my occasional series on string manipulation in Javascript here I offer some tricks for working with URLs. You might also like Addressing the Problem – String Manipulation with Javascript or replaceAll().

Manipulating the URL of the page you are on

To get the URL of the page you are currently on use:

window.location

and it produces:

To retrieve just the domain name use:

window.location.protocol + "//" + window.location.host

and it produces:

Unfortunately this next example does not work with Firefox but also of note is:

window.location.origin

That produces:

To get a file path use:

location.pathname

That based on our URL here produces:

Manipulating a Given URL

The other scenario is when you have a URL as a string from a database or web service and need to extract some information from it.

How can we do this? Here is a useful little function which may help you. The syntax of which is:

Syntax
getPath(url:string, numberOfDirectoriesToGoBack:int, fileOnly:boolean)

function getPath(url, fno, fileOnly){
    var myFileStart;
    var myFile = url;
    for(var i=0; i<fno; i++){
          myFileStart = myFile.lastIndexOf('/');
          myFile = url.substring(0, myFileStart);
    }
    if(fileOnly == true){
        myFileStart = myFile.lastIndexOf('/') + 1;
        var myFile = myFile.substring(myFileStart);
    }
    return myFile;
}

Examples

var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",0, false);
//  http://www.mydomain.com/department/images/photo.jpg
var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",1, false);
//  http://www.mydomain.com/department/images
var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",2, false);
//  http://www.mydomain.com/department

var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",0, true);
// photo.jpg
var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",1, true);
// images
var myURL = getPath("http://www.mydomain.com/department/images/photo.jpg",2, true);
// department

Try it on jsFiddle.

The Explanation

The Javascript used here makes use of lastIndexOf and substring.

The lastIndexOf returns an integer value that is equivalent to the position of the last occurrence of a given string (needle) within a target string (haystack). The value is a zero based index so the first character in a string is counted as 0.

Syntax
haystack.lastIndexOf(needle:String)

For Example:

var myTarget = "Time for Tea";
var myVar = myTarget.lastIndexOf('e');
// myVar is equal to 10

If no occurrence of the needle is found then a value of -1 is returned.

The opposite of the lastIndexOf is the indexOf method. This looks for the first occurrence of the needle.

Syntax
haystack.indexOf(needle:String)

For Example:

var myTarget = "Time for Tea";
var myVar = myTarget.indexOf('e');
// myVar is equal to 3

Back to our getPath() function, it uses lastIndexOf to find the last occurrence of a forward slash. This is then used to create a new string variable.

Here we used substring. The substring Javascript method creates a new string based on a feeder string.

Syntax
feeder.substring(from:integer, [to:integer])

The first parameter indicates where to begin the new string in the feeder in string. The second optional parameter indicates where to end the new string in the feeder string. If this second optional parameter is omitted then the new string will be populated from the 'from' position to the end of the feeder string.

Like with lastIndexOf and indexOf a zero based index is used.

For Example:

var feeder = "Time for Tea";
var myVar1 = feeder.substring(0);
// myVar1 is equal to "Time for Tea"
var myVar2 = feeder.substring(1);
// myVar2 is equal to "ime for Tea"
var myVar3 = feeder.substring(0, 4);
// myVar3 is equal to "Time"
var myVar4 = feeder.substring(9,12);
// myVar4 is equal to "Tea"

Warning: The second parameter is not the length of the desired new string but the position in the feeder string to copy to.

Getting the Domain (without access to the window)

I include this example as I found it useful when trying to get the domain of a parent window of an iframe - when the iframe and parent are on different domains. Assuming you can only write code in the iframe - you can't for security reasons access the window object of the parent. First up use the document.referrer method to get the full URL of the parent.

document.referrer

This value can then be feed into the following to get the domain:

function getDomain(dm){
	var ds =  dm.indexOf("://") +3;
	var de =  dm.indexOf("/", ds);
	var dl =  dm.substr(ds, de-ds);
	return dl;
}
var parentDomain = getDomain(document.referrer);

Leave a Comment