Voir le code:

var file1 = "50.xsl";
var file2 = "30.doc";
getFileExtension(file1); //returns xsl
getFileExtension(file2); //returns doc

function getFileExtension(filename) {
    /*TODO*/
}

Édition plus récente: Beaucoup de choses ont changé depuis la publication initiale de cette question - il y a beaucoup de très bonnes informations dans la réponse révisée de wallacer ainsi que l'excellente ventilation de VisioN

Edit: Tout simplement parce que c'est la réponse acceptée; la réponse de wallacer est en effet bien meilleure:

return filename.split('.').pop();

Mon ancienne réponse:

return /[^.]+$/.exec(filename);

Devrait le faire.

Edit: En réponse au commentaire de PhiLho, utilisez quelque chose comme:

return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;

return filename.split('.').pop();

Rester simple :)

Éditer:

Ceci est une autre solution non regex qui, je pense, est plus efficace:

return filename.substring(filename.lastIndexOf('.')+1, filename.length) || filename;

Il y a quelques cas de coin qui sont mieux traités par la réponse de VisioN ci-dessous, en particulier les fichiers sans extension ( .htaccessetc. inclus).

Il est très performant et gère les cas d'angle d'une manière sans doute meilleure en retournant ""au lieu de la chaîne complète lorsqu'il n'y a pas de point ou pas de chaîne avant le point. C'est une solution très bien conçue, bien que difficile à lire. Collez-le dans votre bibliothèque d'aide et utilisez-le.

Ancien montage:

Une implémentation plus sûre si vous allez exécuter des fichiers sans extension ou des fichiers cachés sans extension (voir le commentaire de VisioN à la réponse de Tom ci-dessus) serait quelque chose dans ce sens

var a = filename.split(".");
if( a.length === 1 || ( a[0] === "" && a.length === 2 ) ) {
    return "";
}
return a.pop();    // feel free to tack .toLowerCase() here if you want

Si a.lengthc'est un, c'est un fichier visible sans extension c'est-à-dire. fichier

Si a[0] === ""et a.length === 2c'est un fichier caché sans extension ie. .htaccess

J'espère que cela aide à résoudre les problèmes avec les cas légèrement plus complexes. En termes de performances, je pense que cette solution est un peu plus lente que regex dans la plupart des navigateurs. Cependant, pour la plupart des utilisations courantes, ce code devrait être parfaitement utilisable.

La solution suivante est rapide et suffisamment courte pour être utilisée dans des opérations en bloc et économiser des octets supplémentaires:

 return fname.slice((fname.lastIndexOf(".") - 1 >>> 0) + 2);

Voici une autre solution universelle non regexp d'une ligne:

 return fname.slice((Math.max(0, fname.lastIndexOf(".")) || Infinity) + 1);

Les deux fonctionnent correctement avec des noms sans extension (par exemple monfichier ) ou commençant par un .point (par exemple .htaccess ):

 ""                            -->   ""
 "name"                        -->   ""
 "name.txt"                    -->   "txt"
 ".htpasswd"                   -->   ""
 "name.with.many.dots.myext"   -->   "myext"

Si vous vous souciez de la vitesse, vous pouvez exécuter la référence et vérifier que les solutions fournies sont les plus rapides, tandis que la courte est extrêmement rapide:

Comment fonctionne le court:

1. String.lastIndexOfretourne la dernière position de la sous-chaîne (ie ".") dans la chaîne donnée (ie fname). Si la sous-chaîne n'est pas trouvée, la méthode retourne -1.
2. Les positions "inacceptables" du point dans le nom de fichier sont -1et 0, qui se réfèrent respectivement aux noms sans extension (par exemple "name") et aux noms commençant par un point (par exemple ".htaccess").
3. L'opérateur de décalage vers la droite de remplissage zéro ( >>>) s'il est utilisé avec zéro affecte les nombres négatifs se transformant -1en 4294967295et -2vers 4294967294, ce qui est utile pour garder le nom de fichier inchangé dans les cas de bord (une sorte d'astuce ici).
4. String.prototype.sliceextrait la partie du nom de fichier de la position qui a été calculée comme décrit. Si le numéro de position est supérieur à la longueur de la méthode de chaîne renvoyée "".

Si vous voulez une solution plus claire qui fonctionnera de la même manière (plus avec un support supplémentaire du chemin complet), vérifiez la version étendue suivante. Cette solution sera plus lente que les monolignes précédentes mais est beaucoup plus facile à comprendre.

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 < 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") );
// >> "ext"

Les trois variantes doivent fonctionner dans n'importe quel navigateur Web côté client et peuvent également être utilisées dans le code NodeJS côté serveur.

function getFileExtension(filename)
{
  var ext = /^.+\.([^.]+)$/.exec(filename);
  return ext == null ? "" : ext[1];
}

Testé avec

"a.b"     (=> "b") 
"a"       (=> "") 
".hidden" (=> "") 
""        (=> "") 
null      (=> "")  

Aussi

"a.b.c.d" (=> "d")
".a.b"    (=> "b")
"a..b"    (=> "b")

function getExt(filename)
{
    var ext = filename.split('.').pop();
    if(ext == filename) return "";
    return ext;
}

var extension = fileName.substring(fileName.lastIndexOf('.')+1);

var parts = filename.split('.');
return parts[parts.length-1];

function file_get_ext(filename)
    {
    return typeof filename != "undefined" ? filename.substring(filename.lastIndexOf(".")+1, filename.length).toLowerCase() : false;
    }

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
};

Tester

Notez qu'en l'absence d'une requête, le fragment peut toujours être présent.

"https://www.example.com:8080/segment1/segment2/page.html?foo=bar#fragment" --> "html"
"https://www.example.com:8080/segment1/segment2/page.html#fragment"         --> "html"
"https://www.example.com:8080/segment1/segment2/.htaccess?foo=bar#fragment" --> "htaccess"
"https://www.example.com:8080/segment1/segment2/page?foo=bar#fragment"      --> ""
"https://www.example.com:8080/segment1/segment2/?foo=bar#fragment"          --> ""
""                                                                          --> ""
null                                                                        --> ""
"a.b.c.d"                                                                   --> "d"
".a.b"                                                                      --> "b"
".a.b."                                                                     --> ""
"a...b"                                                                     --> "b"
"..."                                                                       --> ""

JSLint

0 Avertissements.

Rapide et fonctionne correctement avec les chemins

(filename.match(/[^\\\/]\.([^.\\\/]+)$/) || [null]).pop()

Quelques cas de bord

/path/.htaccess => null
/dir.with.dot/file => null

Les solutions utilisant la division sont lentes et les solutions avec lastIndexOf ne gèrent pas les cas marginaux.

je voulais juste partager cela.

fileName.slice(fileName.lastIndexOf('.'))

bien que cela ait pour inconvénient que les fichiers sans extension renverront la dernière chaîne. mais si vous le faites, cela résoudra tout:

   function getExtention(fileName){
     var i = fileName.lastIndexOf('.');
     if(i === -1 ) return false;
     return fileName.slice(i)
   }

Je suis sûr que quelqu'un pourra et va minimiser et / ou optimiser mon code à l'avenir. Mais, en ce moment , je suis à 200% confiant que mon code fonctionne dans toutes les situations uniques (par exemple, uniquement avec le nom de fichier uniquement , avec des URL relatives , relatives à la racine et absolues , avec des # balises de fragment , avec des ? chaînes de requête , etc.) sinon vous pouvez décider de vous lancer dessus), parfaitement et avec une précision extrême.

Pour la preuve, visitez: https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php

Voici le JSFiddle: https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/

Ne pas être trop confiant ou souffler ma propre trompette, mais je n'ai vu aucun bloc de code pour cette tâche (trouver l' extension de fichier `` correcte '' , au milieu d'une batterie d' functionarguments d'entrée différents ) qui fonctionne aussi bien que cela.

Remarque: Par conception, si une extension de fichier n'existe pas pour la chaîne d'entrée donnée, elle renvoie simplement une chaîne vide "", pas une erreur ni un message d'erreur.

Il faut deux arguments:

• String: fileNameOrURL (auto-explicatif)

• Boolean: showUnixDotFiles ( afficher ou non les fichiers commençant par un point ".")

Remarque (2): Si vous aimez mon code, assurez-vous de l'ajouter à votre bibliothèque js et / ou repo, car j'ai travaillé dur pour le perfectionner, et ce serait dommage de le gaspiller. Donc, sans plus tarder, voici:

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 = "none" ]. Remember: You can never be too sure! */
        hiddenLink.style.display = "none";

        /* 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, ""); /* First, let's strip out the protocol, if there is one. */
        fileNameOrURL = fileNameOrURL.replace(hiddenLink.hostname, ""); /* Now, we'll strip out the host-name (i.e. domain-name) if there is one. */
        fileNameOrURL = fileNameOrURL.replace(":" + hiddenLink.port, ""); /* 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("/"));

        /* 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(".") )
                    {
                        /* If so, we return a blank string to the function caller. Our job here, is done! */
                        return "";
                    };
            };

        /* Now, let's get everything after the period in the filename (i.e. the correct 'file extension'). */
        fileExt = fileName.substr(1 + fileName.lastIndexOf("."));

        /* Now that we've discovered the correct file extension, let's return it to the function caller. */
        return fileExt;
    };

Prendre plaisir! De rien!:

Si vous avez affaire à des URL Web, vous pouvez utiliser:

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

Démo: https://jsfiddle.net/squadjot/q5ard4fj/

Essaye ça:

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;
}

return filename.replace(/\.([a-zA-Z0-9]+)$/, "$1");

edit: Étrangement (ou peut-être pas) le $1dans le deuxième argument de la méthode replace ne semble pas fonctionner ... Désolé.

Je viens de réaliser qu'il ne suffit pas de mettre un commentaire sur la réponse de p4bl0, bien que la réponse de Tom résout clairement le problème:

return filename.replace(/^.*?\.([a-zA-Z0-9]+)$/, "$1");

Pour la plupart des applications, un script simple tel que

return /[^.]+$/.exec(filename);

fonctionnerait très bien (comme fourni par Tom). Cependant, ce n'est pas infaillible. Cela ne fonctionne pas si le nom de fichier suivant est fourni:

image.jpg?foo=bar

Il peut être un peu exagéré, mais je suggérerais d'utiliser un analyseur d'URL tel que celui-ci pour éviter l'échec en raison de noms de fichiers imprévisibles.

En utilisant cette fonction particulière, vous pouvez obtenir le nom de fichier comme ceci:

var trueFileName = parse_url('image.jpg?foo=bar').file;

Cela produira "image.jpg" sans les variables URL. Ensuite, vous êtes libre de saisir l'extension du fichier.

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");
  }
}

function extension(fname) {
  var pos = fname.lastIndexOf(".");
  var strlen = fname.length;
  if (pos != -1 && 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')

renvoie toujours la casse d'extension inférieure afin que vous puissiez la vérifier sur les travaux de changement de champ pour:

file.JpEg

fichier (sans extension)

fichier. (sans extension)

Si vous recherchez une extension spécifique et connaissez sa longueur, vous pouvez utiliser substr :

var file1 = "50.xsl";

if (file1.substr(-4) == '.xsl') {
  // do something
}

Référence JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

Je suis beaucoup de lunes en retard à la fête mais pour plus de simplicité j'utilise quelque chose comme ça

var fileName = "I.Am.FileName.docx";
var nameLen = fileName.length;
var lastDotPos = fileName.lastIndexOf(".");
var fileNameSub = false;
if(lastDotPos === -1)
{
    fileNameSub = false;
}
else
{
    //Remove +1 if you want the "." left too
    fileNameSub = fileName.substr(lastDotPos + 1, nameLen);
}
document.getElementById("showInMe").innerHTML = fileNameSub;

<div id="showInMe"></div>

Il existe une fonction de bibliothèque standard pour cela dans le pathmodule:

import path from 'path';

console.log(path.extname('abc.txt'));

Production:

.SMS

Donc, si vous ne voulez que le format:

path.extname('abc.txt').slice(1) // 'txt'

S'il n'y a pas d'extension, la fonction renverra une chaîne vide:

path.extname('abc') // ''

Si vous utilisez Node, alors path est intégré. Si vous ciblez le navigateur, Webpack fournira une pathimplémentation pour vous. Si vous ciblez le navigateur sans Webpack, vous pouvez inclure manuellement path-browserify .

Il n'y a aucune raison de diviser des chaînes ou de regex.

"one-liner" pour obtenir le nom de fichier et l'extension en utilisant reduceet la déstructuration des tableaux :

var str = "filename.with_dot.png";
var [filename, extension] = str.split('.').reduce((acc, val, i, arr) => (i == arr.length - 1) ? [acc[0].substring(1), val] : [[acc[0], val].join('.')], [])

console.log({filename, extension});

avec une meilleure indentation:

var str = "filename.with_dot.png";
var [filename, extension] = str.split('.')
   .reduce((acc, val, i, arr) => (i == arr.length - 1) 
       ? [acc[0].substring(1), val] 
       : [[acc[0], val].join('.')], [])


console.log({filename, extension});

// {
//   "filename": "filename.with_dot",
//   "extension": "png"
// }

Une solution d'une seule ligne qui tiendra également compte des paramètres de requête et des caractères dans l'URL.

string.match(/(.*)\??/i).shift().replace(/\?.*/, '').split('.').pop()

// Example
// some.url.com/with.in/&ot.s/files/file.jpg?spec=1&.ext=jpg
// jpg

Cette solution simple

function extension(filename) {
  var r = /.+\.(.+)$/.exec(filename);
  return r ? r[1] : null;
}

Les tests

/* tests */
test('cat.gif', 'gif');
test('main.c', 'c');
test('file.with.multiple.dots.zip', 'zip');
test('.htaccess', null);
test('noextension.', null);
test('noextension', null);
test('', null);

// test utility function
function test(input, expect) {
  var result = extension(input);
  if (result === expect)
    console.log(result, input);
  else
    console.error(result, input);
}

function extension(filename) {
  var r = /.+\.(.+)$/.exec(filename);
  return r ? r[1] : null;
}

La réponse de Wallacer est agréable, mais une vérification supplémentaire est nécessaire.

Si le fichier n'a pas d'extension, il utilisera le nom de fichier comme extension qui n'est pas bonne.

Essaye celui-là:

return ( filename.indexOf('.') > 0 ) ? filename.split('.').pop().toLowerCase() : 'undefined';

N'oubliez pas que certains fichiers ne peuvent pas avoir d'extension, donc:

var parts = filename.split('.');
return (parts.length > 1) ? parts.pop() : '';

var file = "hello.txt";
var ext = (function(file, lio) { 
  return lio === -1 ? undefined : file.substring(lio+1); 
})(file, file.lastIndexOf("."));

// hello.txt -> txt
// hello.dolly.txt -> txt
// hello -> undefined
// .hello -> hello

fetchFileExtention(fileName) {
    return fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
}