JavaScript “Current Filename” Function

I found the need to get the current filename, without the file extension, of a webpage using javascript. I thought there would be an easy way with jQuery, but I found a good way to do it in plain javascript. I made a quick function to take care of this task that might save you some time, the compressed version is shown below. I’ll add a more human-readable version in the near future.This code is very unreadable! Please don’t use it blindly, as it may not work in all cases.

function getCurrentFile() {
  var filename = document.location.href;
  var tail = (filename.indexOf(".", (filename.indexOf(".org")+1)) == -1) ? filename.length : filename.lastIndexOf(".");
  return (filename.lastIndexOf("/") >= (filename.length - 1)) ? (filename.substring( filename.substring(0, filename.length - 2).lastIndexOf("/")+1, filename.lastIndexOf("/"))).toLowerCase() : (filename.substring(filename.lastIndexOf("/")+1, tail)).toLowerCase();
}

This function returns the current filename (minus the file extension) in all lower-case. Feel free to modify it to suit your needs. It also works properly even when a URL does not have a file extension (such as with some asp-based sites), or when there is no filename present (returns the folder name). This function is great for highlighting menu items based on which page the user is currently browsing. If you don’t understand some of the syntax, note that I’m using javascript’s conditional syntax as shorthand for if/else statements.

About Ethan Zonca

Ethan is a computer engineer and open source hardware/software developer from Michigan. He enjoys AVR and linux development, photography, mountain biking, and drinking significant amounts of home-roasted coffee. Find out more at ethanzonca.com.