Skip to main content

How to Get the Filename from a Full Path in JavaScript

A common task in programming is to extract the filename (including its extension) from a full file path string. For example, you might need to get image.jpg from /users/alice/images/image.jpg. While JavaScript doesn't have a single built-in function for this in the browser, there are several effective ways to accomplish it.

This guide will teach you the most robust methods for this task. We'll cover the recommended "pure JavaScript" approach using string manipulation, and the definitive solution for the Node.js environment using the built-in path module.

The Core Problem: Extracting the Last Path Segment​

The goal is to find the last occurrence of a path separator (/ or \) and get the substring that follows it.

For example, how to extract the filename from these different path styles?

// Problem: How to extract the filename from these different path styles?
const path1 = '/users/alice/documents/report.pdf';          // Unix-style
const path2 = 'C:\\Users\\Alice\\Documents\\report.pdf';    // Windows-style
const path3 = 'report.pdf';                                 // No path

A robust solution should handle all of these cases correctly, always returning report.pdf.

The Browser/Universal Method: String Manipulation​

For code that needs to run in the browser or in any JavaScript environment, using built-in String methods is the best approach.

Using lastIndexOf and slice​

This is a highly performant and readable manual approach.

The logic:

  1. Find the index of the last /.
  2. Find the index of the last \.
  3. Take the greater of these two indexes. This is the position of the last path separator.
  4. Use .slice() to get the part of the string that comes after this position.

The Solution:

function getFilename(fullPath) {
  const lastSlashIndex = Math.max(
    fullPath.lastIndexOf('/'),
    fullPath.lastIndexOf('\\')
  );
  
  return fullPath.slice(lastSlashIndex + 1);
}

// Example Usage:
console.log(getFilename('/users/alice/report.pdf'));  // Output: "report.pdf"
console.log(getFilename('C:\\data\\report.pdf'));     // Output: "report.pdf"
console.log(getFilename('report.pdf'));               // Output: "report.pdf"
note

This is a very robust "pure JavaScript" solution.

Using split​

Another common string manipulation technique is to split the path by the separators and take the last element.

function getFilenameWithSplit(fullPath) {
  // Use a regex to split by either / or \
  const parts = fullPath.split(/[\\/]/);
  return parts.pop();
}

console.log(getFilenameWithSplit('/users/alice/report.pdf')); // Output: "report.pdf"
note

This is also very effective and can be more concise, though the lastIndexOf approach is often slightly more performant as it avoids creating an intermediate array.

If you are working in a Node.js environment, you should always use the built-in path module. It is specifically designed for handling file paths in a cross-platform, reliable way.

The path.basename() method is the definitive tool for this job.

// In Node.js
import path from 'path'; // Or const path = require('path');

function getFilename(fullPath) {
  return path.basename(fullPath);
}

// Example Usage:
const path1 = '/users/alice/documents/report.pdf';
const path2 = 'C:\\Users\\Alice\\Documents\\report.pdf';

console.log(getFilename(path1)); // Output: "report.pdf"
console.log(getFilename(path2)); // Output: "report.pdf"

The path module automatically handles both / and \ separators, making it the most robust and professional choice for server-side code.

Conclusion​

Extracting a filename from a full path is a straightforward task with the right tools.

  • For browser-side or universal JavaScript, the recommended best practice is to use string manipulation. The lastIndexOf and slice combination is a highly performant and reliable choice.
  • For Node.js applications, you should always use the built-in path.basename() method. It is the most robust, cross-platform, and idiomatic solution for any server-side file path manipulation.

Table of Contents