DEV Community

Jordan Holt
Jordan Holt

Posted on • Originally published at blog.jordanholt.dev on

Get the extension of a filename using JavaScript

In the last post we had a look at some common string methods in JavaScript. In this post we’ll combine a couple of those string methods in a useful function that will return the extension of the filename passed into it.

For the purpose of this post we will consider a filename extension to be delimited from the filename with a dot character.Here are a few typical examples:

  • index.html - .html is the filename extension
  • app.js - .js is the filename extension
  • package.json - .json is the filename extension
  • README.md - .md is the filename extension

This post is not a deep-dive into filename extensions. It’s purpose is to highlight how you can combinestring methods together in useful ways. Make sure to check out the Wikipedia article onfilename extensions for more resources.

First thing we are going to do is create our function. This will be an arrow function and we’ll call it getExtension().

const getExtension = () => {};
Enter fullscreen mode Exit fullscreen mode

This function will have one parameter, a string, which will be our filename. Since our arrow functiononly has one parameter we can remove the brackets.

const getExtension = str => {};
Enter fullscreen mode Exit fullscreen mode

slice() method

As you learned in the previous post, the slice() method can extract a specific portion of a string based on indexes youpass into it. You can take advantage of that in your function as you’ll see shortly. Let’s add that in now.

const getExtension = str => {str.slice()};
Enter fullscreen mode Exit fullscreen mode

The first parameter of the slice() method dictates where the extraction will begin, and the second parameter indicateswhere in the string it should end. With that in mind lets have another look at a common file name and determine how to best useslice() in this scenario.

index.html

The extension of the index.html filename begins with the dot character so in this case the extension would be .html.So we want to start our slice() extraction at the dot character.

We do not need to include the endIndex parameter in the slice() method since we want to extract all the characters of thestring starting from the dot character until the end of the string.

So how do you determine the index of the last dot character in each filename?

lastIndexOf()

Since the lastIndexOf() method returns the index of the last occurrence of a matching pattern its a good choice.

const getExtension = str => {str.slice(str.lastIndexOf("."))};
Enter fullscreen mode Exit fullscreen mode

If you pass in the ”.” (dot character) as the pattern for lastIndexOf(), it will return its index and that index is then used as the beginIndexfor the slice() method. We can also remove the curly braces from our arrow function since it fits on one line.

And that should do it. Let’s try it out.

const getExtension = str => str.slice(str.lastIndexOf("."));

console.log(getExtension("package.json")); // expected output: ".json"
Enter fullscreen mode Exit fullscreen mode

And because we are using the lastIndexOf() method this can work on certain filenames that contain multiple dot characters.such as mysite.index.html

const getExtension = str => str.slice(str.lastIndexOf("."));

console.log(getExtension("mysite.index.html")); // expected output: ".html"
Enter fullscreen mode Exit fullscreen mode

Wrap up

In this post you saw how two common JavaScript string methods can be combined in a useful function.

Depending on your use case this function may not be appropriate. Filename extensions are not always delimited from the filenamewith a dot character, and in some cases have more than one extension which you may need access to. If that’s the case you could modify this function to accommodate those requirements.

In future posts we will combine more string methods and we’ll have a closer look at the replace() method.

Top comments (0)