How can I get file extensions with JavaScript

Question

See code    var file1    50 xsl   var file2    30 doc   getFileExtension file1     returns xsl getFileExtension file2     returns doc  function getFileExtension filename          TODO

User · Answer

function getFileExtension filename      var ext                   exec filename     return ext    null        ext 1       Tested with    a b         gt   b     a           gt         hidden     gt                    gt       null         gt          Also    a b c d     gt   d     a b        gt   b    a  b        gt   b

User · Answer

Newer Edit  Lots of things have changed since this question was initially posted - there s a lot of really good information in wallacer s revised answer as well as VisioN s excellent breakdown    Edit  Just because this is the accepted answer  wallacer s answer is indeed much better   return filename split      pop        My old answer   return          exec filename     Should do it   Edit  In response to PhiLho s comment  use something like   return        exec filename              exec filename    undefined

User · Answer

There is a standard library function for this in the path module    import path from  path    console log path extname  abc txt       Output        txt   So  if you only want the format    path extname  abc txt   slice 1      txt    If there is no extension  then the function will return an empty string    path extname  abc           If you are using Node  then path is built-in  If you are targetting the browser  then Webpack will bundle a path implementation for you  If you are targetting the browser without Webpack  then you can include path-browserify manually    There is no reason to do string splitting or regex

User · Answer

I m sure someone can  and will  minify and or optimize my code in the future  But  as of right now  I am 200  confident that my code works in every unique situation  e g  with just the file name only  with relative  root-relative  and absolute URL s  with fragment   tags  with query   strings  and whatever else you may decide to throw at it   flawlessly  and with pin-point precision  For proof  visit  https   projects jamesandersonjr com web js projects get file extension test php Here s the JSFiddle  https   jsfiddle net JamesAndersonJr ffcdd5z3  Not to be overconfident  or blowing my own trumpet  but I haven t seen any block of code for this task  finding the  correct  file extension  amidst a battery of different function input arguments  that works as well as this does  Note  By design  if a file extension doesn t exist for the given input string  it simply returns a blank string  quot  quot   not an error  nor an error message   It takes two arguments   String  fileNameOrURL  self-explanatory   Boolean  showUnixDotFiles  Whether or Not to show files that begin with a dot  quot   quot      Note  2   If you like my code  be sure to add it to your js library s  and or repo s  because I worked hard on perfecting it  and it would be a shame to go to waste  So  without further ado  here it is  function getFileExtension fileNameOrURL  showUnixDotFiles                   First  let s declare some preliminary variables we ll need later on             var fileName          var fileExt                      Now we ll create a hidden anchor   a   element  Note  No need to append this element to the document              var hiddenLink   document createElement  a                        Just for fun  we ll add a CSS attribute of   style display    quot none quot     Remember  You can never be too sure             hiddenLink style display    quot none quot                       Set the  href  attribute of the hidden link we just created  to the  fileNameOrURL  argument received by this function             hiddenLink setAttribute  href   fileNameOrURL                       Now  let s take advantage of the browser s built-in parser  to remove elements from the original  fileNameOrURL  argument received by this function  without actually modifying our newly created hidden  anchor  element             fileNameOrURL   fileNameOrURL replace hiddenLink protocol   quot  quot       First  let s strip out the protocol  if there is one             fileNameOrURL   fileNameOrURL replace hiddenLink hostname   quot  quot       Now  we ll strip out the host-name  i e  domain-name  if there is one             fileNameOrURL   fileNameOrURL replace  quot   quot    hiddenLink port   quot  quot       Now finally  we ll strip out the port number  if there is one  Kinda overkill though  -                             Now  we re ready to finish processing the  fileNameOrURL  variable by removing unnecessary parts  to isolate the file name                         Operations for working with  relative  root-relative  and absolute  URL s ONLY  BEGIN                          Break the possible URL at the         and take first part  to shave of the entire query string   everything after the       if it exist             fileNameOrURL   fileNameOrURL split      0               Sometimes URL s don t have query s  but DO have a fragment       i e  reference anchor    so we should also do the same for the fragment tag                   fileNameOrURL   fileNameOrURL split      0               Now that we have just the URL  ALONE   Let s remove everything to the last slash in URL  to isolate the file name             fileNameOrURL   fileNameOrURL substr 1   fileNameOrURL lastIndexOf  quot   quot                 Operations for working with  relative  root-relative  and absolute  URL s ONLY  END                  Now   fileNameOrURL  should just be  fileName             fileName   fileNameOrURL                      Now  we check if we should show UNIX dot-files  or not  This should be either  true  or  false                if   showUnixDotFiles    false                                    If not   false    we should check if the filename starts with a period  indicating it s a UNIX dot-file                      if   fileName startsWith  quot   quot                                                      If so  we return a blank string to the function caller  Our job here  is done                             return  quot  quot                                                             Now  let s get everything after the period in the filename  i e  the correct  file extension               fileExt   fileName substr 1   fileName lastIndexOf  quot   quot                 Now that we ve discovered the correct file extension  let s return it to the function caller             return fileExt          Enjoy  You re Quite Welcome

User · Answer

fetchFileExtention fileName        return fileName slice  fileName lastIndexOf      - 1  gt  gt  gt  0    2

User · Answer

The following solution is fast and short enough to use in bulk operations and save extra bytes    return fname slice  fname lastIndexOf      - 1  gt  gt  gt  0    2     Here is another one-line non-regexp universal solution    return fname slice  Math max 0  fname lastIndexOf          Infinity    1     Both work correctly with names having no extension  e g  myfile  or starting with   dot  e g   htaccess                                   -- gt         name                         -- gt         name txt                     -- gt     txt     htpasswd                    -- gt         name with many dots myext    -- gt     myext    If you care about the speed you may run the benchmark and check that the provided solutions are the fastest  while the short one is tremendously fast     How the short one works    String lastIndexOf method returns the last position of the substring  i e       in the given string  i e  fname   If the substring is not found method returns -1  The  unacceptable  positions of dot in the filename are -1 and 0  which respectively refer to names with no extension  e g   name   and to names that start with dot  e g    htaccess    Zero-fill right shift operator   gt  gt  gt   if used with zero affects negative numbers transforming -1 to 4294967295 and -2 to 4294967294  which is useful for remaining the filename unchanged in the edge cases  sort of a trick here   String prototype slice extracts the part of the filename from the position that was calculated as described  If the position number is more than the length of the string method returns         If you want more clear solution which will work in the same way  plus with extra support of full path   check the following extended version  This solution will be slower than previous one-liners but is much easier to understand   function getExtension path        var basename   path split          pop        extract file name from full path                                                        supports      and     separators          pos   basename lastIndexOf                get last position of          if  basename           pos  lt  1                if file name is empty or             return                                         not found  -1  or comes first  0       return basename slice pos   1                 extract extension ignoring        console log  getExtension   path to file ext          gt  gt   ext    All three variants should work in any web browser on the client side and can be used in the server side NodeJS code as well

User · Answer

I just realized that it s not enough to put a comment on p4bl0 s answer  though Tom s answer clearly solves the problem   return filename replace          a-zA-Z0-9         1

User · Answer

function getFileExtension filename      var ext                   exec filename     return ext    null        ext 1       Tested with    a b         gt   b     a           gt         hidden     gt                    gt       null         gt          Also    a b c d     gt   d     a b        gt   b    a  b        gt   b

User · Answer

function func       var val   document frm filename value    var arr   val split         alert arr arr length - 1      var arr1   val split          alert arr1 arr1 length - 2      if  arr 1      gif     arr 1      bmp     arr 1      jpeg         alert  this is an image file         else       alert  this is not an image file

User · Answer

function func       var val   document frm filename value    var arr   val split         alert arr arr length - 1      var arr1   val split          alert arr1 arr1 length - 2      if  arr 1      gif     arr 1      bmp     arr 1      jpeg         alert  this is an image file         else       alert  this is not an image file

User · Answer

one-liner  to get filename and extension using reduce and array destructuring      x000D   x000D  var str    filename with dot png   x000D  var  filename  extension    str split      reduce  acc  val  i  arr    gt   i    arr length - 1     acc 0  substring 1   val      acc 0   val  join            x000D   x000D  console log  filename  extension    x000D   x000D   x000D    with better indentation    var str    filename with dot png   var  filename  extension    str split          reduce  acc  val  i  arr    gt   i    arr length - 1             acc 0  substring 1   val              acc 0   val  join              console log  filename  extension                filename    filename with dot         extension    png

User · Answer

function func       var val   document frm filename value    var arr   val split         alert arr arr length - 1      var arr1   val split          alert arr1 arr1 length - 2      if  arr 1      gif     arr 1      bmp     arr 1      jpeg         alert  this is an image file         else       alert  this is not an image file

User · Answer

var filetypeArray    file type  split       var filetype   filetypeArray 1     This is a better approach imo

User · Answer

return filename split      pop      Keep it simple       Edit   This is another non-regex solution that I believe is more efficient   return filename substring filename lastIndexOf      1  filename length     filename    There are some corner cases that are better handled by VisioN s answer below  particularly files with no extension   htaccess etc included    It s very performant  and handles corner cases in an arguably better way by returning    instead of the full string when there s no dot or no string before the dot   It s a very well crafted solution  albeit tough to read   Stick it in your helpers lib and just use it   Old Edit   A safer implementation if you re going to run into files with no extension  or hidden files with no extension  see VisioN s comment to Tom s answer above  would be something along these lines  var a   filename split       if  a length     1      a 0          amp  amp  a length     2           return       return a pop          feel free to tack  toLowerCase   here if you want   If a length is one  it s a visible file with no extension ie  file  If a 0         and a length     2 it s a hidden file with no extension ie   htaccess  Hope this helps to clear up issues with the slightly more complex cases   In terms of performance  I believe this solution is a little slower than regex in most browsers   However  for most common purposes this code should be perfectly usable

User · Answer

return filename replace      a-zA-Z0-9         1      edit  Strangely  or maybe it s not  the  1 in the second argument of the replace method doesn t seem to work    Sorry

User · Answer

Code         Extract file extension from URL      param  String  url     returns  String  File extension or empty string if no extension is present      var getFileExtension   function  url         use strict       if  url     null            return               var index   url lastIndexOf           if  index     -1            url   url substring index   1      Keep path without its segments           index   url indexOf           if  index     -1            url   url substring 0  index      Remove query           index   url indexOf           if  index     -1            url   url substring 0  index      Remove fragment           index   url lastIndexOf           return index     -1           url substring index   1     Only keep file extension                  No extension found      Test  Notice that in the absence of a query  the fragment might still be present    https   www example com 8080 segment1 segment2 page html foo bar fragment  -- gt   html   https   www example com 8080 segment1 segment2 page html fragment          -- gt   html   https   www example com 8080 segment1 segment2  htaccess foo bar fragment  -- gt   htaccess   https   www example com 8080 segment1 segment2 page foo bar fragment       -- gt      https   www example com 8080 segment1 segment2  foo bar fragment           -- gt                                                                                 -- gt     null                                                                        -- gt      a b c d                                                                    -- gt   d    a b                                                                       -- gt   b    a b                                                                       -- gt      a   b                                                                      -- gt   b                                                                              -- gt       JSLint  0 Warnings

User · Answer

function extension fname      var pos   fname lastIndexOf         var strlen   fname length    if  pos    -1  amp  amp  strlen    pos   1        var ext   fname split           var len   ext length      var extension   ext len - 1  toLowerCase        else       extension    No extension found         return extension        usage  extension  file jpeg    always returns the extension lower cas so you can check it on field change works for   file JpEg  file          no extension   file          noextension

User · Answer

function file get ext filename            return typeof filename     undefined    filename substring filename lastIndexOf      1  filename length  toLowerCase     false

User · Answer

If you are looking for a specific extension and know its length  you can use substr   var file1    50 xsl    if  file1 substr -4       xsl          do something     JavaScript reference  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String substr

User · Answer

fetchFileExtention fileName        return fileName slice  fileName lastIndexOf      - 1  gt  gt  gt  0    2

User · Answer

var file    hello txt   var ext    function file  lio       return lio     -1   undefined   file substring lio 1       file  file lastIndexOf            hello txt - gt  txt    hello dolly txt - gt  txt    hello - gt  undefined     hello - gt  hello

User · Answer

Don t forget that some files can have no extension  so   var parts   filename split       return  parts length  gt  1    parts pop

User · Answer

var parts   filename split       return parts parts length-1

User · Answer

If you are looking for a specific extension and know its length  you can use substr   var file1    50 xsl    if  file1 substr -4       xsl          do something     JavaScript reference  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String substr

User · Answer

i just wanted to share this   fileName slice fileName lastIndexOf         although this has a downfall that files with no extension will return last string  but if you do so this will fix every thing       function getExtention fileName        var i   fileName lastIndexOf            if i     -1   return false       return fileName slice i

User · Answer

For most applications  a simple script such as   return          exec filename     would work just fine  as provided by Tom   However this is not fool proof  It does not work if the following file name is provided   image jpg foo bar   It may be a bit overkill but I would suggest using a url parser such as this one to avoid failure due to unpredictable filenames   Using that particular function  you could get the file name like this   var trueFileName   parse url  image jpg foo bar   file    This will output  image jpg  without the url vars  Then you are free to grab the file extension

User · Answer

function extension fname      var pos   fname lastIndexOf         var strlen   fname length    if  pos    -1  amp  amp  strlen    pos   1        var ext   fname split           var len   ext length      var extension   ext len - 1  toLowerCase        else       extension    No extension found         return extension        usage  extension  file jpeg    always returns the extension lower cas so you can check it on field change works for   file JpEg  file          no extension   file          noextension

User · Answer

I just realized that it s not enough to put a comment on p4bl0 s answer  though Tom s answer clearly solves the problem   return filename replace          a-zA-Z0-9         1

User · Answer

Code         Extract file extension from URL      param  String  url     returns  String  File extension or empty string if no extension is present      var getFileExtension   function  url         use strict       if  url     null            return               var index   url lastIndexOf           if  index     -1            url   url substring index   1      Keep path without its segments           index   url indexOf           if  index     -1            url   url substring 0  index      Remove query           index   url indexOf           if  index     -1            url   url substring 0  index      Remove fragment           index   url lastIndexOf           return index     -1           url substring index   1     Only keep file extension                  No extension found      Test  Notice that in the absence of a query  the fragment might still be present    https   www example com 8080 segment1 segment2 page html foo bar fragment  -- gt   html   https   www example com 8080 segment1 segment2 page html fragment          -- gt   html   https   www example com 8080 segment1 segment2  htaccess foo bar fragment  -- gt   htaccess   https   www example com 8080 segment1 segment2 page foo bar fragment       -- gt      https   www example com 8080 segment1 segment2  foo bar fragment           -- gt                                                                                 -- gt     null                                                                        -- gt      a b c d                                                                    -- gt   d    a b                                                                       -- gt   b    a b                                                                       -- gt      a   b                                                                      -- gt   b                                                                              -- gt       JSLint  0 Warnings

User · Answer

Fast and works correctly with paths   filename match                              null   pop     Some edge cases   path  htaccess   gt  null  dir with dot file   gt  null   Solutions using split are slow and solutions with lastIndexOf don t handle edge cases

User · Answer

return filename replace      a-zA-Z0-9         1      edit  Strangely  or maybe it s not  the  1 in the second argument of the replace method doesn t seem to work    Sorry

User · Answer

Simple way to get filename even multiple dot in name  var filename    my filehere txt    file name    filename replace     filename split      pop         console log  Filename   gt   file name     OutPut   my filehere  extension   filename split      pop    console log  Extension   gt   extension     OutPut   txt  Try this is one line code

User · Answer

Wallacer s answer is nice  but one more checking is needed   If file has no extension  it will use filename as extension which is not good   Try this one   return   filename indexOf       gt  0     filename split      pop   toLowerCase      undefined

User · Answer

var parts   filename split       return parts parts length-1

User · Answer

For most applications  a simple script such as   return          exec filename     would work just fine  as provided by Tom   However this is not fool proof  It does not work if the following file name is provided   image jpg foo bar   It may be a bit overkill but I would suggest using a url parser such as this one to avoid failure due to unpredictable filenames   Using that particular function  you could get the file name like this   var trueFileName   parse url  image jpg foo bar   file    This will output  image jpg  without the url vars  Then you are free to grab the file extension

User · Answer

function getExt filename        var ext   filename split      pop        if ext    filename  return         return ext

User · Answer

function extension fname      var pos   fname lastIndexOf         var strlen   fname length    if  pos    -1  amp  amp  strlen    pos   1        var ext   fname split           var len   ext length      var extension   ext len - 1  toLowerCase        else       extension    No extension found         return extension        usage  extension  file jpeg    always returns the extension lower cas so you can check it on field change works for   file JpEg  file          no extension   file          noextension

User · Answer

function file get ext filename            return typeof filename     undefined    filename substring filename lastIndexOf      1  filename length  toLowerCase     false

User · Answer

Simple way to get filename even multiple dot in name  var filename    my filehere txt    file name    filename replace     filename split      pop         console log  Filename   gt   file name     OutPut   my filehere  extension   filename split      pop    console log  Extension   gt   extension     OutPut   txt  Try this is one line code

User · Answer

function getExt filename        var ext   filename split      pop        if ext    filename  return         return ext

User · Answer

There s also a simple approach using ES6 destructuring   x000D   x000D  const path    hello world txt  const  extension     nameParts    path split      reverse    console log  extension    extension   x000D   x000D   x000D

User · Answer

I just realized that it s not enough to put a comment on p4bl0 s answer  though Tom s answer clearly solves the problem   return filename replace          a-zA-Z0-9         1

User · Answer

Try this   function getFileExtension filename      var fileinput   document getElementById filename     if   fileinput      return       var filename   fileinput value    if  filename length    0      return       var dot   filename lastIndexOf         if  dot    -1      return       var extension   filename substr dot  filename length     return extension

User · Answer

Newer Edit  Lots of things have changed since this question was initially posted - there s a lot of really good information in wallacer s revised answer as well as VisioN s excellent breakdown    Edit  Just because this is the accepted answer  wallacer s answer is indeed much better   return filename split      pop        My old answer   return          exec filename     Should do it   Edit  In response to PhiLho s comment  use something like   return        exec filename              exec filename    undefined

User · Answer

I prefer to use lodash for most things so here s a solution   function getExtensionFromFilename filename        let extension           if  filename  gt                let parts     split filename                if  parts length  gt   2            extension     last parts             return extension

User · Answer

var extension   fileName substring fileName lastIndexOf      1

User · Answer

In node js  this can be achieved by the following code   var file1   50 xsl   var path   require  path    console log path parse file1  name

User · Answer

Newer Edit  Lots of things have changed since this question was initially posted - there s a lot of really good information in wallacer s revised answer as well as VisioN s excellent breakdown    Edit  Just because this is the accepted answer  wallacer s answer is indeed much better   return filename split      pop        My old answer   return          exec filename     Should do it   Edit  In response to PhiLho s comment  use something like   return        exec filename              exec filename    undefined

User · Answer

If you are dealing with web urls  you can use   function getExt filepath        return filepath split      0  split      0  split      pop       getExt     js logic v2 min js      js getExt  http   example net site page php id 16548      php getExt  http   example net site page html welcome to me      html getExt  c   logs  yesterday log       log   Demo  https   jsfiddle net squadjot q5ard4fj

User · Answer

If you are dealing with web urls  you can use   function getExt filepath        return filepath split      0  split      0  split      pop       getExt     js logic v2 min js      js getExt  http   example net site page php id 16548      php getExt  http   example net site page html welcome to me      html getExt  c   logs  yesterday log       log   Demo  https   jsfiddle net squadjot q5ard4fj

User · Answer

function getFileExtension filename      var ext                   exec filename     return ext    null        ext 1       Tested with    a b         gt   b     a           gt         hidden     gt                    gt       null         gt          Also    a b c d     gt   d     a b        gt   b    a  b        gt   b

User · Answer

I m many moons late to the party but for simplicity I use something like this   x000D   x000D  var fileName    I Am FileName docx   x000D  var nameLen   fileName length  x000D  var lastDotPos   fileName lastIndexOf       x000D  var fileNameSub   false  x000D  if lastDotPos     -1  x000D    x000D      fileNameSub   false  x000D    x000D  else x000D    x000D        Remove  1 if you want the     left too x000D      fileNameSub   fileName substr lastDotPos   1  nameLen   x000D    x000D  document getElementById  showInMe   innerHTML   fileNameSub  x000D   lt div id  showInMe  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This simple solution  function extension filename      var r               exec filename     return r   r 1    null      Tests   x000D   x000D     tests    x000D  test  cat gif    gif    x000D  test  main c    c    x000D  test  file with multiple dots zip    zip    x000D  test   htaccess   null   x000D  test  noextension    null   x000D  test  noextension   null   x000D  test     null   x000D   x000D     test utility function x000D  function test input  expect    x000D    var result   extension input   x000D    if  result     expect  x000D      console log result  input   x000D    else x000D      console error result  input   x000D    x000D   x000D  function extension filename    x000D    var r               exec filename   x000D    return r   r 1    null  x000D    x000D   x000D   x000D

User · Answer

x000D   x000D             x000D  function getFileExtension file    x000D    var regexp        0-9a-z               i  x000D    var extension   file match regexp   x000D    return extension  amp  amp  extension 1   x000D    x000D   x000D  console log getFileExtension  https   www example com 8080 path name foo     x000D  console log getFileExtension  https   www example com 8080 path name foo BAR     x000D  console log getFileExtension  https   www example com 8080 path name  quz foo bar key value fragment     x000D  console log getFileExtension  https   www example com 8080 path name  quz bar key value fragment     x000D   x000D   x000D

User · Answer

Newer Edit  Lots of things have changed since this question was initially posted - there s a lot of really good information in wallacer s revised answer as well as VisioN s excellent breakdown    Edit  Just because this is the accepted answer  wallacer s answer is indeed much better   return filename split      pop        My old answer   return          exec filename     Should do it   Edit  In response to PhiLho s comment  use something like   return        exec filename              exec filename    undefined

User · Answer

function extension fname      var pos   fname lastIndexOf         var strlen   fname length    if  pos    -1  amp  amp  strlen    pos   1        var ext   fname split           var len   ext length      var extension   ext len - 1  toLowerCase        else       extension    No extension found         return extension        usage  extension  file jpeg    always returns the extension lower cas so you can check it on field change works for   file JpEg  file          no extension   file          noextension

User · Answer

A one line solution that will also account for query params and any characters in url   string match          i  shift   replace             split      pop       Example    some url com with in  amp ot s files file jpg spec 1 amp  ext jpg    jpg

User · Answer

var file    hello txt   var ext    function file  lio       return lio     -1   undefined   file substring lio 1       file  file lastIndexOf            hello txt - gt  txt    hello dolly txt - gt  txt    hello - gt  undefined     hello - gt  hello

User · Answer

I m many moons late to the party but for simplicity I use something like this   x000D   x000D  var fileName    I Am FileName docx   x000D  var nameLen   fileName length  x000D  var lastDotPos   fileName lastIndexOf       x000D  var fileNameSub   false  x000D  if lastDotPos     -1  x000D    x000D      fileNameSub   false  x000D    x000D  else x000D    x000D        Remove  1 if you want the     left too x000D      fileNameSub   fileName substr lastDotPos   1  nameLen   x000D    x000D  document getElementById  showInMe   innerHTML   fileNameSub  x000D   lt div id  showInMe  gt  lt  div gt  x000D   x000D   x000D

User · Answer

function getFileExtension filename      var ext                   exec filename     return ext    null        ext 1       Tested with    a b         gt   b     a           gt         hidden     gt                    gt       null         gt          Also    a b c d     gt   d     a b        gt   b    a  b        gt   b

User · Answer

Wallacer s answer is nice  but one more checking is needed   If file has no extension  it will use filename as extension which is not good   Try this one   return   filename indexOf       gt  0     filename split      pop   toLowerCase      undefined

User · Answer

return filename replace      a-zA-Z0-9         1      edit  Strangely  or maybe it s not  the  1 in the second argument of the replace method doesn t seem to work    Sorry

User · Answer

function file get ext filename            return typeof filename     undefined    filename substring filename lastIndexOf      1  filename length  toLowerCase     false

User · Answer

I m sure someone can  and will  minify and or optimize my code in the future  But  as of right now  I am 200  confident that my code works in every unique situation  e g  with just the file name only  with relative  root-relative  and absolute URL s  with fragment   tags  with query   strings  and whatever else you may decide to throw at it   flawlessly  and with pin-point precision  For proof  visit  https   projects jamesandersonjr com web js projects get file extension test php Here s the JSFiddle  https   jsfiddle net JamesAndersonJr ffcdd5z3  Not to be overconfident  or blowing my own trumpet  but I haven t seen any block of code for this task  finding the  correct  file extension  amidst a battery of different function input arguments  that works as well as this does  Note  By design  if a file extension doesn t exist for the given input string  it simply returns a blank string  quot  quot   not an error  nor an error message   It takes two arguments   String  fileNameOrURL  self-explanatory   Boolean  showUnixDotFiles  Whether or Not to show files that begin with a dot  quot   quot      Note  2   If you like my code  be sure to add it to your js library s  and or repo s  because I worked hard on perfecting it  and it would be a shame to go to waste  So  without further ado  here it is  function getFileExtension fileNameOrURL  showUnixDotFiles                   First  let s declare some preliminary variables we ll need later on             var fileName          var fileExt                      Now we ll create a hidden anchor   a   element  Note  No need to append this element to the document              var hiddenLink   document createElement  a                        Just for fun  we ll add a CSS attribute of   style display    quot none quot     Remember  You can never be too sure             hiddenLink style display    quot none quot                       Set the  href  attribute of the hidden link we just created  to the  fileNameOrURL  argument received by this function             hiddenLink setAttribute  href   fileNameOrURL                       Now  let s take advantage of the browser s built-in parser  to remove elements from the original  fileNameOrURL  argument received by this function  without actually modifying our newly created hidden  anchor  element             fileNameOrURL   fileNameOrURL replace hiddenLink protocol   quot  quot       First  let s strip out the protocol  if there is one             fileNameOrURL   fileNameOrURL replace hiddenLink hostname   quot  quot       Now  we ll strip out the host-name  i e  domain-name  if there is one             fileNameOrURL   fileNameOrURL replace  quot   quot    hiddenLink port   quot  quot       Now finally  we ll strip out the port number  if there is one  Kinda overkill though  -                             Now  we re ready to finish processing the  fileNameOrURL  variable by removing unnecessary parts  to isolate the file name                         Operations for working with  relative  root-relative  and absolute  URL s ONLY  BEGIN                          Break the possible URL at the         and take first part  to shave of the entire query string   everything after the       if it exist             fileNameOrURL   fileNameOrURL split      0               Sometimes URL s don t have query s  but DO have a fragment       i e  reference anchor    so we should also do the same for the fragment tag                   fileNameOrURL   fileNameOrURL split      0               Now that we have just the URL  ALONE   Let s remove everything to the last slash in URL  to isolate the file name             fileNameOrURL   fileNameOrURL substr 1   fileNameOrURL lastIndexOf  quot   quot                 Operations for working with  relative  root-relative  and absolute  URL s ONLY  END                  Now   fileNameOrURL  should just be  fileName             fileName   fileNameOrURL                      Now  we check if we should show UNIX dot-files  or not  This should be either  true  or  false                if   showUnixDotFiles    false                                    If not   false    we should check if the filename starts with a period  indicating it s a UNIX dot-file                      if   fileName startsWith  quot   quot                                                      If so  we return a blank string to the function caller  Our job here  is done                             return  quot  quot                                                             Now  let s get everything after the period in the filename  i e  the correct  file extension               fileExt   fileName substr 1   fileName lastIndexOf  quot   quot                 Now that we ve discovered the correct file extension  let s return it to the function caller             return fileExt          Enjoy  You re Quite Welcome

User · Answer

I just realized that it s not enough to put a comment on p4bl0 s answer  though Tom s answer clearly solves the problem   return filename replace          a-zA-Z0-9         1

User · Answer

x000D   x000D             x000D  function getFileExtension file    x000D    var regexp        0-9a-z               i  x000D    var extension   file match regexp   x000D    return extension  amp  amp  extension 1   x000D    x000D   x000D  console log getFileExtension  https   www example com 8080 path name foo     x000D  console log getFileExtension  https   www example com 8080 path name foo BAR     x000D  console log getFileExtension  https   www example com 8080 path name  quz foo bar key value fragment     x000D  console log getFileExtension  https   www example com 8080 path name  quz bar key value fragment     x000D   x000D   x000D

User · Answer

This simple solution  function extension filename      var r               exec filename     return r   r 1    null      Tests   x000D   x000D     tests    x000D  test  cat gif    gif    x000D  test  main c    c    x000D  test  file with multiple dots zip    zip    x000D  test   htaccess   null   x000D  test  noextension    null   x000D  test  noextension   null   x000D  test     null   x000D   x000D     test utility function x000D  function test input  expect    x000D    var result   extension input   x000D    if  result     expect  x000D      console log result  input   x000D    else x000D      console error result  input   x000D    x000D   x000D  function extension filename    x000D    var r               exec filename   x000D    return r   r 1    null  x000D    x000D   x000D   x000D

User · Answer

var parts   filename split       return parts parts length-1

User · Answer

one-liner  to get filename and extension using reduce and array destructuring      x000D   x000D  var str    filename with dot png   x000D  var  filename  extension    str split      reduce  acc  val  i  arr    gt   i    arr length - 1     acc 0  substring 1   val      acc 0   val  join            x000D   x000D  console log  filename  extension    x000D   x000D   x000D    with better indentation    var str    filename with dot png   var  filename  extension    str split          reduce  acc  val  i  arr    gt   i    arr length - 1             acc 0  substring 1   val              acc 0   val  join              console log  filename  extension                filename    filename with dot         extension    png

User · Answer

In node js  this can be achieved by the following code   var file1   50 xsl   var path   require  path    console log path parse file1  name

User · Answer

return filename split      pop      Keep it simple       Edit   This is another non-regex solution that I believe is more efficient   return filename substring filename lastIndexOf      1  filename length     filename    There are some corner cases that are better handled by VisioN s answer below  particularly files with no extension   htaccess etc included    It s very performant  and handles corner cases in an arguably better way by returning    instead of the full string when there s no dot or no string before the dot   It s a very well crafted solution  albeit tough to read   Stick it in your helpers lib and just use it   Old Edit   A safer implementation if you re going to run into files with no extension  or hidden files with no extension  see VisioN s comment to Tom s answer above  would be something along these lines  var a   filename split       if  a length     1      a 0          amp  amp  a length     2           return       return a pop          feel free to tack  toLowerCase   here if you want   If a length is one  it s a visible file with no extension ie  file  If a 0         and a length     2 it s a hidden file with no extension ie   htaccess  Hope this helps to clear up issues with the slightly more complex cases   In terms of performance  I believe this solution is a little slower than regex in most browsers   However  for most common purposes this code should be perfectly usable

User · Answer

var parts   filename split       return parts parts length-1

User · Answer

Try this   function getFileExtension filename      var fileinput   document getElementById filename     if   fileinput      return       var filename   fileinput value    if  filename length    0      return       var dot   filename lastIndexOf         if  dot    -1      return       var extension   filename substr dot  filename length     return extension

User · Answer

I know this is an old question  but I wrote this function with tests for extracting file extension  and her available with NPM  Yarn  Bit  Maybe it will help someone  https   bit dev joshk jotils get-file-extension  function getFileExtension path  string   string       var regexp        0-9a-z               i     var extension   path match regexp      return extension  amp  amp  extension 1      You can see the tests I wrote here

User · Answer

The following solution is fast and short enough to use in bulk operations and save extra bytes    return fname slice  fname lastIndexOf      - 1  gt  gt  gt  0    2     Here is another one-line non-regexp universal solution    return fname slice  Math max 0  fname lastIndexOf          Infinity    1     Both work correctly with names having no extension  e g  myfile  or starting with   dot  e g   htaccess                                   -- gt         name                         -- gt         name txt                     -- gt     txt     htpasswd                    -- gt         name with many dots myext    -- gt     myext    If you care about the speed you may run the benchmark and check that the provided solutions are the fastest  while the short one is tremendously fast     How the short one works    String lastIndexOf method returns the last position of the substring  i e       in the given string  i e  fname   If the substring is not found method returns -1  The  unacceptable  positions of dot in the filename are -1 and 0  which respectively refer to names with no extension  e g   name   and to names that start with dot  e g    htaccess    Zero-fill right shift operator   gt  gt  gt   if used with zero affects negative numbers transforming -1 to 4294967295 and -2 to 4294967294  which is useful for remaining the filename unchanged in the edge cases  sort of a trick here   String prototype slice extracts the part of the filename from the position that was calculated as described  If the position number is more than the length of the string method returns         If you want more clear solution which will work in the same way  plus with extra support of full path   check the following extended version  This solution will be slower than previous one-liners but is much easier to understand   function getExtension path        var basename   path split          pop        extract file name from full path                                                        supports      and     separators          pos   basename lastIndexOf                get last position of          if  basename           pos  lt  1                if file name is empty or             return                                         not found  -1  or comes first  0       return basename slice pos   1                 extract extension ignoring        console log  getExtension   path to file ext          gt  gt   ext    All three variants should work in any web browser on the client side and can be used in the server side NodeJS code as well

User · Answer

var extension   fileName substring fileName lastIndexOf      1

User · Answer

return filename replace      a-zA-Z0-9         1      edit  Strangely  or maybe it s not  the  1 in the second argument of the replace method doesn t seem to work    Sorry

User · Answer

I prefer to use lodash for most things so here s a solution   function getExtensionFromFilename filename        let extension           if  filename  gt                let parts     split filename                if  parts length  gt   2            extension     last parts             return extension

User · Answer

Don t forget that some files can have no extension  so   var parts   filename split       return  parts length  gt  1    parts pop

User · Answer

var filetypeArray    file type  split       var filetype   filetypeArray 1     This is a better approach imo

User · Answer

Fast and works correctly with paths   filename match                              null   pop     Some edge cases   path  htaccess   gt  null  dir with dot file   gt  null   Solutions using split are slow and solutions with lastIndexOf don t handle edge cases

User · Answer

There is a standard library function for this in the path module    import path from  path    console log path extname  abc txt       Output        txt   So  if you only want the format    path extname  abc txt   slice 1      txt    If there is no extension  then the function will return an empty string    path extname  abc           If you are using Node  then path is built-in  If you are targetting the browser  then Webpack will bundle a path implementation for you  If you are targetting the browser without Webpack  then you can include path-browserify manually    There is no reason to do string splitting or regex

User · Answer

function func       var val   document frm filename value    var arr   val split         alert arr arr length - 1      var arr1   val split          alert arr1 arr1 length - 2      if  arr 1      gif     arr 1      bmp     arr 1      jpeg         alert  this is an image file         else       alert  this is not an image file

User · Answer

function file get ext filename            return typeof filename     undefined    filename substring filename lastIndexOf      1  filename length  toLowerCase     false

User · Answer

There s also a simple approach using ES6 destructuring   x000D   x000D  const path    hello world txt  const  extension     nameParts    path split      reverse    console log  extension    extension   x000D   x000D   x000D

User · Answer

I know this is an old question  but I wrote this function with tests for extracting file extension  and her available with NPM  Yarn  Bit  Maybe it will help someone  https   bit dev joshk jotils get-file-extension  function getFileExtension path  string   string       var regexp        0-9a-z               i     var extension   path match regexp      return extension  amp  amp  extension 1      You can see the tests I wrote here

User · Answer

A one line solution that will also account for query params and any characters in url   string match          i  shift   replace             split      pop       Example    some url com with in  amp ot s files file jpg spec 1 amp  ext jpg    jpg

User · Answer

i just wanted to share this   fileName slice fileName lastIndexOf         although this has a downfall that files with no extension will return last string  but if you do so this will fix every thing       function getExtention fileName        var i   fileName lastIndexOf            if i     -1   return false       return fileName slice i

[javascript] How can I get file extensions with JavaScript?

Examples related to javascript

Examples related to file-extension