Siehe Code:

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

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

Neuere Bearbeitung: Viele Dinge haben sich geändert, seit diese Frage ursprünglich gestellt wurde - die überarbeitete Antwort von wallacer enthält viele wirklich gute Informationen sowie die hervorragende Aufschlüsselung von VisioN

Bearbeiten: Nur weil dies die akzeptierte Antwort ist; Wallacers Antwort ist in der Tat viel besser:

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

Meine alte Antwort:

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

Sollte es tun.

Bearbeiten: Verwenden Sie als Antwort auf PhiLhos Kommentar Folgendes:

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

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

Halte es einfach :)

Bearbeiten:

Dies ist eine weitere Nicht-Regex-Lösung, die meiner Meinung nach effizienter ist:

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

Es gibt einige Eckfälle, die in der folgenden Antwort von VisioN besser behandelt werden , insbesondere Dateien ohne Erweiterung ( .htaccessusw. enthalten).

Es ist sehr performant und behandelt Eckfälle wohl besser, indem es ""anstelle der vollständigen Zeichenfolge zurückkehrt, wenn vor dem Punkt kein Punkt oder keine Zeichenfolge steht. Es ist eine sehr gut gestaltete Lösung, wenn auch schwer zu lesen. Stecke es in deine Helferbibliothek und benutze es einfach.

Alte Bearbeitung:

Eine sicherere Implementierung, wenn Sie auf Dateien ohne Erweiterung oder versteckte Dateien ohne Erweiterung stoßen (siehe VisioNs Kommentar zu Toms Antwort oben), wäre etwas in dieser Richtung

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

Wenn a.lengthes eine ist, ist es eine sichtbare Datei ohne Erweiterung, dh. Datei

Wenn a[0] === ""und a.length === 2es ist eine versteckte Datei ohne Erweiterung, dh. .htaccess

Ich hoffe, dies hilft, Probleme mit den etwas komplexeren Fällen zu klären. In Bezug auf die Leistung glaube ich, dass diese Lösung in den meisten Browsern etwas langsamer als Regex ist . Für die meisten gängigen Zwecke sollte dieser Code jedoch perfekt verwendbar sein.

Die folgende Lösung ist schnell und kurz genug, um in Massenoperationen verwendet zu werden und zusätzliche Bytes zu sparen:

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

Hier ist eine weitere einzeilige universelle Lösung ohne Regexp:

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

Beide funktionieren korrekt mit Namen ohne Erweiterung (z. B. myfile ) oder beginnend mit .dot (z. B. .htaccess ):

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

Wenn Sie sich für die Geschwindigkeit interessieren, können Sie den Benchmark ausführen und überprüfen, ob die bereitgestellten Lösungen die schnellsten sind, während die kurze enorm schnell ist:

Wie der kurze funktioniert:

1. String.lastIndexOfMethode gibt die letzte Position des Teilstrings (dh ".") in der angegebenen Zeichenfolge (dh fname) zurück. Wenn der Teilstring nicht gefunden wird, wird die Methode zurückgegeben -1.
2. Die "nicht akzeptablen" Positionen von Punkten im Dateinamen sind -1und 0, die sich jeweils auf Namen ohne Erweiterung (z. B. "name") und auf Namen beziehen , die mit Punkt (z ".htaccess". B. ) beginnen.
3. Der Zero-Fill-Rechtsverschiebungsoperator ( >>>) wirkt sich bei Verwendung mit Null auf negative Zahlen aus, die -1in 4294967295und -2nach transformiert werden. 4294967294Dies ist nützlich, um den Dateinamen in den Randfällen unverändert zu lassen (eine Art Trick hier).
4. String.prototype.sliceextrahiert den Teil des Dateinamens aus der Position, die wie beschrieben berechnet wurde. Wenn die Positionsnummer größer als die Länge der Zeichenfolge ist, wird die Methode zurückgegeben "".

Wenn Sie eine klarere Lösung wünschen, die auf die gleiche Weise funktioniert (plus mit zusätzlicher Unterstützung des vollständigen Pfads), überprüfen Sie die folgende erweiterte Version. Diese Lösung ist langsamer als frühere Einzeiler, aber viel einfacher zu verstehen.

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"

Alle drei Varianten sollten in jedem Webbrowser auf der Clientseite funktionieren und können auch im serverseitigen NodeJS-Code verwendet werden.

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

Getestet mit

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

Ebenfalls

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

Prüfung

Beachten Sie, dass das Fragment ohne Abfrage möglicherweise noch vorhanden ist.

"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 Warnungen.

Schnell und funktioniert korrekt mit Pfaden

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

Einige Randfälle

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

Lösungen, die Split verwenden, sind langsam und Lösungen mit lastIndexOf behandeln keine Randfälle.

Ich wollte das nur teilen.

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

Dies hat jedoch den Nachteil, dass Dateien ohne Erweiterung die letzte Zeichenfolge zurückgeben. Aber wenn Sie dies tun, wird dies alles beheben:

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

Ich bin sicher, dass jemand meinen Code in Zukunft minimieren und / oder optimieren kann und wird. Ab sofort bin ich jedoch zu 200% davon überzeugt, dass mein Code in jeder einzelnen Situation funktioniert (z. B. nur mit dem Dateinamen , mit relativen , root-relativen und absoluten URLs, mit Fragment- # Tags, mit Abfragezeichenfolgen ? und was auch immer Andernfalls können Sie sich dafür entscheiden, fehlerfrei und punktgenau darauf zu werfen.

Weitere Informationen finden Sie unter: https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php

Hier ist die JSFiddle: https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/

Nicht zu selbstsicher zu sein oder meine eigene Trompete zu blasen, aber ich habe keinen Codeblock für diese Aufgabe gesehen (die 'richtige' Dateierweiterung inmitten einer Reihe von anderen zu findenfunction Eingabeargumente), der so gut funktioniert wie dies.

Hinweis: Wenn für die angegebene Eingabezeichenfolge keine Dateierweiterung vorhanden ist, wird standardmäßig einfach eine leere Zeichenfolge zurückgegeben "", weder ein Fehler noch eine Fehlermeldung.

Es braucht zwei Argumente:

• String: fileNameOrURL (selbsterklärend)

• Boolean: showUnixDotFiles ( Gibt an, ob Dateien angezeigt werden sollen, die mit einem Punkt "." Beginnen.)

Hinweis (2): Wenn Ihnen mein Code gefällt, fügen Sie ihn unbedingt Ihrer js-Bibliothek und / oder Ihren Repos hinzu, da ich hart daran gearbeitet habe, ihn zu perfektionieren, und es wäre eine Schande, ihn zu verschwenden. Also, ohne weiteres, hier ist es:

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

Genießen! Du bist immer willkommen!:

Wenn Sie mit Web-URLs zu tun haben, können Sie Folgendes verwenden:

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/

Versuche dies:

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: Seltsamerweise (oder vielleicht auch nicht) $1scheint das im zweiten Argument der Ersetzungsmethode nicht zu funktionieren ... Entschuldigung.

Ich habe gerade festgestellt, dass es nicht ausreicht, die Antwort von p4bl0 zu kommentieren, obwohl Toms Antwort das Problem eindeutig löst:

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

Für die meisten Anwendungen ein einfaches Skript wie

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

würde gut funktionieren (wie von Tom zur Verfügung gestellt). Dies ist jedoch kein Kinderspiel. Es funktioniert nicht, wenn der folgende Dateiname angegeben wird:

image.jpg?foo=bar

Es mag ein bisschen übertrieben sein, aber ich würde vorschlagen, einen URL-Parser wie diesen zu verwenden , um Fehler aufgrund unvorhersehbarer Dateinamen zu vermeiden.

Mit dieser speziellen Funktion können Sie den Dateinamen wie folgt erhalten:

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

Dies gibt "image.jpg" ohne die URL-Variablen aus. Dann können Sie die Dateierweiterung abrufen.

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

//Verwendungszweck

Erweiterung ('file.jpeg')

Gibt immer die untere untere Erweiterung der Erweiterung zurück, damit Sie überprüfen können, ob der Feldwechsel funktioniert für:

file.JpEg

Datei (keine Erweiterung)

Datei. (keine Verlängerung)

Wenn Sie nach einer bestimmten Erweiterung suchen und deren Länge kennen, können Sie substr verwenden :

var file1 = "50.xsl";

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

JavaScript-Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

Ich bin viele Monde zu spät zur Party, aber der Einfachheit halber benutze ich so etwas

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>

Hierfür gibt es im pathModul eine Standardbibliotheksfunktion :

import path from 'path';

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

Ausgabe:

.TXT

Also, wenn Sie nur das Format wollen:

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

Wenn es keine Erweiterung gibt, gibt die Funktion eine leere Zeichenfolge zurück:

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

Wenn Sie Node verwenden, pathist dies integriert. Wenn Sie auf den Browser abzielen, bündelt Webpack eine pathImplementierung für Sie. Wenn Sie den Browser ohne Webpack anvisieren, können Sie path-browserify manuell einschließen .

Es gibt keinen Grund, String-Splitting oder Regex durchzuführen.

„one-liner“ zu bekommen Dateinamen und Erweiterung verwenden reduceund Array Destrukturierung :

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

mit besserer Einrückung:

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"
// }

Eine einzeilige Lösung, die auch Abfrageparameter und alle Zeichen in der URL berücksichtigt.

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

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

Diese einfache Lösung

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

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

Wallacers Antwort ist nett, aber eine weitere Überprüfung ist erforderlich.

Wenn die Datei keine Erweiterung hat, wird der Dateiname als Erweiterung verwendet, was nicht gut ist.

Probier diese:

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

Vergessen Sie nicht, dass einige Dateien keine Erweiterung haben können.

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