How can I get file extensions with JavaScript?

In JavaScript, obtaining file extensions is a common task, especially when handling uploaded files or managing file systems. There are several methods to achieve this functionality.

Method 1: Using String Splitting and Pop Method

The simplest and most common approach is to combine the split() method for strings with the pop() method for arrays to extract the file extension. The key here is to split the filename using . into an array and then use pop() to retrieve the last element, which is the file extension.

javascript
function getFileExtension(filename) {
    // Ensure the filename contains a '.', otherwise return an empty string
    if (filename.lastIndexOf('.') === -1) {
        return '';
    }

    // Split the filename using '.' and use pop() to get the last part
    return filename.split('.').pop();
}

// Usage example
console.log(getFileExtension('example.png')); // Output: png
console.log(getFileExtension('archive.tar.gz')); // Output: gz
console.log(getFileExtension('no_extension_file')); // Output: ''

Method 2: Using Regular Expressions

Another approach is to use regular expressions to match the characters following the last . in the filename. This method is particularly effective for handling complex filenames, such as those with multiple dots.

javascript
function getFileExtension(filename) {
    // Match the file extension using a regular expression
    const match = filename.match(/\.([^\.]+)$/);

    // Return the matched extension if successful, otherwise return an empty string
    return match ? match[1] : '';
}

// Usage example
console.log(getFileExtension('example.png')); // Output: png
console.log(getFileExtension('archive.tar.gz')); // Output: gz
console.log(getFileExtension('no_extension_file')); // Output: ''

Method 3: Using slice and lastIndexOf

This method uses the lastIndexOf() method to locate the position of the last dot and then employs slice() to extract the substring from that position to the end of the string, which represents the file extension.

javascript
function getFileExtension(filename) {
    // lastIndexOf('.') returns the position of the last '.'
    let lastIndex = filename.lastIndexOf('.');

    // If no '.' exists, return an empty string
    if (lastIndex === -1) {
        return '';
    }

    // Extract the substring starting from the position after the last dot
    return filename.slice(lastIndex + 1);
}

// Usage example
console.log(getFileExtension('example.png')); // Output: png
console.log(getFileExtension('archive.tar.gz')); // Output: gz
console.log(getFileExtension('no_extension_file')); // Output: ''

These are the common methods for obtaining file extensions in JavaScript. Each method has specific use cases, and you can select the appropriate one based on your requirements.