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);