Javascript regex for matching/extracting file extension

Try

var patt1 = /\.([0-9a-z]+)(?:[\?#]|$)/i;

This RegExp is useful for extracting file extensions from URLs - even ones that have ?foo=1 query strings and #hash endings.

It will also provide you with the extension as $1.

var m1 = ("filename-jpg").match(patt1);
alert(m1);  // null

var m2 = ("filename#gif").match(patt1);
alert(m2);  // null

var m3 = ("filename.png").match(patt1);
alert(m3);  // [".png", "png"]

var m4 = ("filename.txt?foo=1").match(patt1);
alert(m4);  // [".txt?", "txt"]

var m5 = ("filename.html#hash").match(patt1);
alert(m5);  // [".html#", "html"]

P.S. +1 for @stema who offers pretty good advice on some of the RegExp syntax basics involved.

Example list:

var fileExtensionPattern = /\.([0-9a-z]+)(?=[?#])|(\.)(?:[\w]+)$/gmi
//regex flags -- Global, Multiline, Insensitive

var ma1 = 'css/global.css?v=1.2'.match(fileExtensionPattern)[0];
console.log(ma1);
// returns .css

var ma2 = 'index.html?a=param'.match(fileExtensionPattern)[0];
console.log(ma2);
// returns .html

var ma3 = 'default.aspx?'.match(fileExtensionPattern)[0];
console.log(ma3);
// returns .aspx

var ma4 = 'pages.jsp#firstTab'.match(fileExtensionPattern)[0];
console.log(ma4);
// returns .jsp

var ma5 = 'jquery.min.js'.match(fileExtensionPattern)[0];
console.log(ma5);
// returns .js

var ma6 = 'file.123'.match(fileExtensionPattern)[0];
console.log(ma6);
// returns .123

Test page.

ONELINER:

let ext = (filename.match(/\.([^.]*?)(?=\?|#|$)/) || [])[1] 

above solution include links. It takes everything between last dot and first "?" or "#" char or string end. To ignore "?" and "#" characters use /\.([^.]*)$/. To ignore only "#" use /\.([^.]*?)(?=\?|$)/. Examples

function getExtension(filename) {
  return (filename.match(/\.([^.]*?)(?=\?|#|$)/) || [])[1];
}


// TEST
[
  "abcd.Ef1",
  "abcd.efg",
  "abcd.efg?aaa&a?a=b#cb",
  "abcd.efg#aaa__aa?bb",
  "abcd",
  "abcdefg?aaa&aa=bb",
  "abcdefg#aaa__bb",
].forEach(t=> console.log(`${t.padEnd(21,' ')} -> ${getExtension(t)}`))

I found this solution on the O'Reilly Regular Expressions Cookbook (chapter 8, section 24). It is case-insensitive and works with .NET, Java, JavaScript, PCRE, Perl, Python & Ruby.

\.[^.\\/:*?"<>|\r\n]+$

A file extension must begin with a dot. Thus, we add ‹.› to match a literal dot at the start of the regex.

Filenames such as Version 2.0.txt may contain multiple dots. The last dot is the one that delimits the extension from the filename. The extension itself should not contain any dots. We specify this in the regex by putting a dot inside the character class. The dot is simply a literal character inside character classes, so we don’t need to escape it. The ‹$› anchor at the end of the regex makes sure we match .txt instead of .0.

If the string ends with a backslash, or with a filename that doesn’t include any dots, the regex won’t match at all. When it does match, it will match the extension, including the dot that delimits the extension and ...

I will advise use this function since it avoids returning null

const getExtension = (filename?: string): string | undefined => {
  if (!filename) return undefined
  const match = /\.([^.]+)$/.exec(filename)
  return match ? match[1] : undefined
}

This function takes an optional filename parameter, which can be undefined. If the filename is undefined, the function returns undefined. Otherwise, the function uses a regular expression to extract the file extension from the filename. If the regular expression matches, the function returns the extracted file extension; otherwise, it returns undefined.

const getExtension = (filename) => {
  if (!filename) return undefined
  const match = /\.([^.]+)$/.exec(filename)
  return match ? match[1] : undefined
}

[
  "a.abc.x.ico",
  "foobar.a",
  "foobar.txt",
  "foobar.foobar1234",
  "undegined",
  undefined, null
].forEach(t =>
  console.log(
    getExtension(t)
  )
)