Wie kann ich Dateierweiterungen mit JavaScript erhalten?

501

Siehe Code:

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

function getFileExtension(filename) {
    /*TODO*/
}
Sergio del Amo
quelle

Antworten:

796

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;
Tom
quelle
1
Ist es nicht teuer, den regulären Ausdruck zweimal auszuführen?
Andrew Hedges
5
Die hoch bewertete Antwort unten ist viel besser.
Fletom
2
Leider schlagen beide Lösungen für Namen wie Datei und .htaccess fehl .
VisioN
3
Alle möglichen Fälle werden wie folgt verarbeitet: return filename.split ("."). Slice (1) .pop () || "";
JustAndrei
1
@JustAndrei Immer noch nicht alle :) Für den reinen Dateinamen (Basisname?), Kein Pfad, aus praktischen Gründen denke ich, sollte es so sein. return filename.substring(0,1) === '.' ? '' : filename.split('.').slice(1).pop() || '';Dies kümmert sich auch um .file(Unix versteckt, glaube ich) Arten von Dateien. Das ist, wenn Sie es als Einzeiler behalten möchten, was für meinen Geschmack etwas chaotisch ist.
Kooker
833
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.

Wallacer
quelle
4
Ich kann die Leistung nicht kommentieren, aber diese sieht auf jeden Fall sauber aus! Ich benutze es. +1
pc1oad1etter
6
In diesem Fall sieht der Dateiname jedoch wie folgt aus: filname.tes.test.jpg. Bitte beachten Sie die Ausgabe. Ich hoffe es wird falsch sein.
Fero
19
in diesem Fall ist die Ausgabe "jpg"
Wallacer
1
Brillant! Vielen Dank. Es ist schön zu sehen, dass eine Lösung keinen regulären Ausdruck verwendet. Ich habe dies mit PHP gemacht und es verwendet nur ein paar Funktionen. +1
Bojangles
3
@wallacer: Was passiert, wenn es filenametatsächlich keine Erweiterung gibt? Würde dies nicht einfach den Basisdateinamen zurückgeben, was irgendwie schlecht wäre?
Nicol Bolas
287

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:

Geschwindigkeitsvergleich

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.

Vision
quelle
5
Funktioniert nicht. "/home/user/.app/config" gibt "app / config" zurück, was völlig falsch ist.
Mrbrdo
33
@mrbrdo Diese Methode soll nicht mit vollständigem Pfad nur mit Dateinamen arbeiten, wie in der Frage gefordert. Lesen Sie die Frage sorgfältig durch, bevor Sie abstimmen.
VisioN
8
Warum sollten Sie sich bemühen, eine so triviale Codezeile zu optimieren? Tilde- und Bitshift-Operatoren werden in JavaScript so selten verwendet, dass ich eine solche Antwort nicht unterstützen kann. Wenn 5 Aufzählungspunkte erforderlich sind, um zu erklären, wie eine Codezeile funktioniert, schreiben Sie den Code besser neu, damit er tatsächlich verständlich ist.
Jackson
6
Die Geschwindigkeit dieser einen Zeile macht in keiner Anwendung einen spürbaren Unterschied. Bitweise wird so selten verwendet, dass beliebte Linters wie JSLint und JSHint davor warnen, sie zu verwenden. Die Besessenheit über die Leistung und Kompaktheit dieser Logik hat die Qualität des Codes verschlechtert. Wenn Code "zusätzliche Untersuchung" erfordert, halte ich ihn für "schlecht".
Jackson
10
@Jackson Angesichts der Tatsache, dass dies eine Website ist, auf der mehrere Lösungen für ein Problem angeboten werden können, ist es nie schlecht, eine Lösung zu haben, die die Leistung optimiert. Ihre Aussage "wird in keiner Anwendung einen wahrnehmbaren Unterschied machen" basiert vollständig auf Ihrem engen Umfang möglicher Anwendungen, in denen dies verwendet werden könnte. Darüber hinaus kann sie jemandem, der sich mit dem Problem befasst, eine Lernerfahrung bieten, in der er einige optimieren kann anderer Code, den sie für eine rechenintensive Anwendung benötigen, die sie schreiben.
Nrylee
33
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")
PhiLho
quelle
Damit es im IE funktioniert: var pattern = "^. + \\. ([^.] +) $"; var ext = new RegExp (Muster);
spc16670
20
function getExt(filename)
{
    var ext = filename.split('.').pop();
    if(ext == filename) return "";
    return ext;
}
Dima
quelle
8
return (ext === Dateiname)? '': ext;
Michiel
13
var extension = fileName.substring(fileName.lastIndexOf('.')+1);
Pono
quelle
8
var parts = filename.split('.');
return parts[parts.length-1];
Randy Sugianto 'Yuku'
quelle
8
function file_get_ext(filename)
    {
    return typeof filename != "undefined" ? filename.substring(filename.lastIndexOf(".")+1, filename.length).toLowerCase() : false;
    }
Joe Scylla
quelle
8

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.

Jack
quelle
7

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.

mrbrdo
quelle
Welche Randfälle meinst du? Bitte beziehen Sie sich hier auf meine Lösung: stackoverflow.com/a/12900504/1249581 . Es funktioniert in allen Fällen einwandfrei und ist viel schneller als jedes Regex-Gerät.
VisioN
Ich habe die Randfälle bereits aufgelistet. Und Ihre Lösung behandelt sie NICHT richtig. Versuchen Sie, wie ich bereits geschrieben habe, "/dir.with.dot/file". Ihr Code gibt "Punkt / Datei" zurück, was lächerlich falsch ist.
Mrbrdo
1
Niemand hat darum gebeten, den Pfad zu analysieren. Die Frage betraf das Extrahieren von Erweiterungen aus Dateinamen.
VisioN
3
Wie ich Ihnen bereits sagte, wurde dies nie explizit gesagt, und eine Lösung, die Pfade handhabt, ist offensichtlich viel nützlicher. Die Antwort auf eine Frage zu SO soll für andere Personen als die Person, die die Frage gestellt hat, nützlich sein. Ich denke wirklich nicht, dass eine Lösung, die eine Obermenge von Eingaben verarbeitet, herabgestuft werden sollte.
Mrbrdo
3
Die Abwertung war für die Verwendung der globalen Variablen mit .exec(). Ihr Code wird besser sein als (filename.match(/[^\\/]\.([^\\/.]+)$/) || [null]).pop().
VisioN
6

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)
   }
Hussein Nazzal
quelle
Soweit ich mich erinnere slice, bezieht sich die Methode eher auf Arrays als auf Strings. Für Saiten substroder substringwird funktionieren.
VisioN
@ VisioN, aber ich denke, Sie sollten wissen, dass es String.prototype.sliceeine Array.prototype.sliceMethode gibt und auch so, dass es irgendwie funktioniert
Hussein Nazzal
1
Ah ja. Du hast recht. Diese Methode komplett vergessen. Mein Fehler.
VisioN
5

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

James Anderson Jr.
quelle
1
Genial. Vielen Dank!
GollyJer
5

// 获取文件后缀名
function getFileExtension(file) {
  var regexp = /\.([0-9a-z]+)(?:[\?#]|$)/i;
  var extension = file.match(regexp);
  return extension && extension[1];
}

console.log(getFileExtension("https://www.example.com:8080/path/name/foo"));
console.log(getFileExtension("https://www.example.com:8080/path/name/foo.BAR"));
console.log(getFileExtension("https://www.example.com:8080/path/name/.quz/foo.bar?key=value#fragment"));
console.log(getFileExtension("https://www.example.com:8080/path/name/.quz.bar?key=value#fragment"));

山 茶树 和 葡萄 树
quelle
5

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/

Jakob Sternberg
quelle
Ihre Lösung gefällt mir sehr gut. Es macht so viel mit so wenig. Ich werde es benutzen.
Jules Manson
4

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;
}
Edward
quelle
3
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.

p4bl0
quelle
1
Es funktioniert perfekt, aber Sie haben verpasst, dass Sie den gesamten anderen Inhalt der Zeichenfolge entfernen müssen: return filename.replace (/^.*? \. ([A-zA-Z0-9] +) $ /, "$ 1");
Roenving
3

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");
Roenving
quelle
3

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.

Justin Bull
quelle
3
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");
  }
}
Jim Blackler
quelle
3
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)

Jim Blackler
quelle
3

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

Jenny O'Reilly
quelle
1
Schönheit kommt mit Einfachheit. Dies ist die intelligenteste, eleganteste und effizienteste Antwort von allen. Ich habe immer String.substr (-3) oder String.substr (-4) verwendet, um Erweiterungen auf Windows-basierten Systemen abzurufen. Warum sollte jemand dafür reguläre Ausdrücke und verrückte Schleifen verwenden wollen?
Asiby
13
@asiby Diese Art von Lösungen ist der Hauptgrund für den Absturz von Weltraumraketen nach dem Start.
VisioN
3

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>

DzSoundNirvana
quelle
3

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.

sdgfsdh
quelle
Wer hat etwas über Node gesagt?
Shannon Hochkins
Ihr Argument dafür, keine Aufteilung oder reguläre Ausdrücke zu verwenden, besteht darin, das Plugin einzuschließen oder die Anwendung mit dem Knoten zu bündeln.
Dies ist
@ ShannonHochkins die meiste Zeit haben Sie diese Dinge sowieso eingerichtet
sdgfsdh
@AndreiDraganescu Ich hatte nicht vor, dass es herablassend ist, also habe ich es abgeschwächt.
sdgfsdh
3

„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"
// }
boehm_s
quelle
Dies funktioniert nicht in IE 11
Gokul Maha
Sie können babel / typescript / polyfills für fehlende ES7 + -Funktionen von IE 11
boehm_s
2

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
Labithiotis
quelle
(1) Wenn eine Datei keine Erweiterung hat, wird weiterhin der Dateiname zurückgegeben. (2) Wenn die URL ein Fragment enthält, aber keine Abfrage (z. B. page.html#fragment), werden die Dateierweiterung und das Fragment zurückgegeben.
Jack
2

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

Vitim.us
quelle
1

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';
Krabbe
quelle
1

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

var parts = filename.split('.');
return (parts.length > 1) ? parts.pop() : '';
Tamás Pap
quelle
1
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
NSD
quelle
1
fetchFileExtention(fileName) {
    return fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
}
GauRang Omar
quelle
2
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Brett DeWoody