How to get file extensions using JavaScript?

    To get file extensions using JavaScript, there are so many ways. The most useful ones are:

  • 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:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      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:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      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:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output:
      regexp-output



    My Personal Notes arrow_drop_up

    Maybe this silence is dangerous

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



    Improved By : mayank5326



    Article Tags :

    1


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.