How to Extract a File Extension from a Filename in JavaScript

By the end of this page, you will understand how to extract a file extension from a filename in JavaScript, when simple string methods are enough, when to use Node.js path utilities, and how to handle tricky cases like filenames without extensions or files that begin with a dot.

A file extension is the part of a filename that appears after the last dot. It is often used to indicate file type:

• photo.jpg → jpg
• report.pdf → pdf
• script.js → js

In programming, extracting the extension is useful for:

• validating uploads
• choosing how to process a file
• filtering file lists
• displaying file type icons

In JavaScript, there is no single universal string method called something like getExtension(). Instead, developers usually solve this in one of two ways:

1. Use string methods such as lastIndexOf() and slice()
2. Use Node.js built-in utilities such as path.extname() when working with file paths on the server

The important part is not just getting text after a dot, but handling edge cases correctly. For example:

• README has no extension
• .gitignore starts with a dot, but is usually treated as a hidden filename, not a file with extension gitignore
• archive.tar.gz may be treated as gz if you want only the final extension

Think of a filename like a label on a storage box.

• The main name is the box label: photo
• The extension is the small tag at the end: .jpg

If you want the extension, you usually look for the last dot in the label.

Examples:

• photo.jpg → look after the last dot → jpg
• archive.tar.gz → look after the last dot → gz
• README → no dot at the end part → no extension
• .gitignore → the dot is at the start, so this is usually a hidden filename, not a normal extension

So the mental rule is:

Find the last meaningful dot. If there is none, there is probably no extension.

A common JavaScript approach uses lastIndexOf().

function getExtension(filename) {
  const lastDot = filename.lastIndexOf('.');

  if (lastDot <= 0) {
    return '';
  }

  return filename.slice(lastDot + 1);
}

console.log(getExtension('photo.jpg'));      // jpg
console.log(getExtension('archive.tar.gz')); // gz
console.log(getExtension('README'));         // ""
console.log(getExtension('.gitignore'));     // ""

How it works

• lastIndexOf('.') finds the last dot in the string
• If the dot is missing, it returns -1

Let's trace this example:

function getExtension(filename) {
  const lastDot = filename.lastIndexOf('.');

  if (lastDot <= 0) {
    return '';
  }

  return filename.slice(lastDot + 1);
}

console.log(getExtension('report.final.pdf'));

Step-by-step

1. filename is 'report.final.pdf'
2. filename.lastIndexOf('.') finds the last dot
3. The last dot is before 'pdf'
4. lastDot becomes the index of that dot
5. if (lastDot <= 0) is checked
   • it is not <= 0, so the function continues
6. filename.slice(lastDot + 1) returns the part after the dot
7. The result is 'pdf'

Here are common situations where extracting file extensions is useful:

• File upload validation
  • Allow only .jpg, .png, or .pdf
• Choosing a parser
  • Read .json files with a JSON parser
  • Read .csv files with a CSV parser
• Displaying icons in a file manager
  • Show a PDF icon for .pdf
  • Show an image icon for .png
• Filtering files in scripts
  • Process only .log files in a directory
• Export features
  • Decide whether to save output as .txt, .csv, or .json

Example:

function isImageFile(filename) {
  const ext = (filename).();
   [, , , , ].(ext);
}

.(()); 

In real projects, developers usually do more than just extract an extension.

1. Normalize case

Extensions may come in uppercase or mixed case.

const ext = getExtension(filename).toLowerCase();

2. Use guard clauses

Return early for invalid input.

function getExtension(filename) {
  if (typeof filename !== 'string' || filename.length === 0) {
    return '';
  }

  const lastDot = filename.lastIndexOf('.');
  if (lastDot <= 0) {
    return '';
  }

  return filename.slice(lastDot + 1);
}

3. Validate against an allowlist

const allowedExtensions = ['jpg', 'png', 'pdf'];
const ext = getExtension(filename).();

 (!allowedExtensions.(ext)) {
    ();
}

1. Using the first dot instead of the last dot

Broken example:

function getExtension(filename) {
  const firstDot = filename.indexOf('.');
  return filename.slice(firstDot + 1);
}

console.log(getExtension('archive.tar.gz')); // tar.gz

If you want only the final extension, use lastIndexOf() instead.

2. Treating hidden files as having an extension

Broken example:

function getExtension(filename) {
  const lastDot = filename.lastIndexOf('.');
  return filename.slice(lastDot + 1);
}

console.log(getExtension('.gitignore')); // gitignore

This is usually not what you want. Check lastDot <= 0.

lastIndexOf() vs

// Without dot
function getExtension(filename) {
  const lastDot = filename.lastIndexOf('.');
  if (lastDot <= 0) return '';
  return filename.slice(lastDot + 1);
}

// With dot
function getExtensionWithDot(filename) {
  const lastDot = filename.lastIndexOf('.');
  if (lastDot <= 0) return '';
  return filename.slice(lastDot);
}

Rules

• Use lastIndexOf('.') for the final extension
• If the result is -1, there is no dot
• If the result is 0, it is usually a hidden file like .env
• Use .toLowerCase() before comparing extensions
• In Node.js, prefer path.extname() for file paths

Is there a built-in JavaScript function to get a file extension?

Not in core string methods. In plain JavaScript, you usually use lastIndexOf() and slice(). In Node.js, you can use path.extname().

How do I get the extension without the dot?

Use slice(lastDot + 1) after finding the last dot.

What happens if the filename has no extension?

A good function should return an empty string, such as ''.

Is .gitignore considered to have the extension gitignore?

Usually no. It is normally treated as a hidden filename that starts with a dot.

How do I handle filenames like archive.tar.gz?

Most extension logic returns only the final extension, gz. If you need tar.gz, that is a custom rule.

Should I use file extension checks for security?

No. Extensions are useful for convenience, but not enough for security. Validate MIME type or file contents too.

Does path.extname() work in the browser?

Not by default. It is a Node.js API. In browser code, use string methods unless your tooling provides a path module.

• String methods — Useful because extension extraction often uses lastIndexOf() and slice().
• Node.js path module — Related because path.extname() is the built-in server-side solution.
• File paths vs filenames — Important because a full path may need different handling than a simple filename.
• Input validation — Related because extracted extensions are often used to validate uploads.
• Array includes() — Helpful when checking whether an extension is in an allowlist.
• Case normalization — Important when comparing values like JPG and jpg.
• MIME types — Related because file extensions do not always reflect the real file type.