How to get file extensions using JavaScript?

Last Updated : 09 Aug, 2019

split() and pop() method
substring() and lastIndexOf() method
match() method with regular expression

Above methods are described below one by one with the proper example.

Using split() and pop() method:

The full filename is first obtained by selecting the file input and getting its value property. This returns the filename as a string.

By the help of split() method, we will split the filename into 2 parts. The first part will be the filename and the second part will be the extension of the file.

The extension can then be got by popping from the array the last string with the pop() method. This is hence the file extension of the file selected.

Syntax:

fileName.split(separator, limit).pop();

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button  
       to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension" 
                             onclick="checkFileExtension();"/> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 
            extension = fileName.split('.').pop(); 
            document.querySelector('.output') 
                                     .textContent = extension; 
        }; 
    </script> 
</body> 
  
</html> 

Output:

split-output

Using substring() and lastIndexOf() method:
The full filename is first obtained after that substring() method is used to return the part of a string between the start and end indexes.

The starting index is given by using the lastIndexOf() method. This returns the index in the string where the string passed last occurs. The last index can be found by passing a period(.) to this method. The index is passed on to the substring() method, which returns the string from the period(.) to the end. This is the file extension.

Syntax:

fileName.substring(fileName.lastIndexOf(searchvalue, start);

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button 
        to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension" 
                               onclick="checkFileExtension();" /> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 
            extension = fileName.substring(fileName.lastIndexOf('.') + 1); 
            document.querySelector('.output') 
                                    .textContent = extension; 
        }; 
    </script> 
</body> 
  
</html> 

Output:

substring-output

match() method with regular expression:

Regular expressions can be used to extract the file extension from the full filename. A new RegExp object is created with the regular expression “[^.]+$”. The caret(^) marks the start of a string. The period(.) after the caret specifies that the string is selected after the period. The plus(+) quantifier selects one or more words. The dollar($) is used to specify the end of the line. This expression selects the string after the period.

The match() method is used to return the part of the string which matches the regular expression passed to it as a parameter. The full filename is passed to this method and the regular expression returns only the file extension.

Syntax:

fileName = document.querySelector('#file1').value;
regex = new RegExp('[^.]+$');
extension = fileName.match(regex);

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button  
         to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension" 
                               onclick="checkFileExtension();"/> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 
  
            regex = new RegExp('[^.]+$'); 
  
            extension = fileName.match(regex); 
            document.querySelector('.output') 
                                     .textContent = extension; 
        }; 
    </script> 
</body> 
  
</html> 