Wie kann ich Dateierweiterungen mit JavaScript erhalten?

Question

Siehe Code:

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

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

Answer 1

"Einzeiler" zum Ermitteln von Dateinamen und Erweiterung mit reduce y 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"
// }

Answer 2

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

//Verwendung

Erweiterung('file.jpeg')

gibt immer die Erweiterung unter cas zurück, so dass Sie sie bei Feldänderungen überprüfen können funktioniert für:

Datei.JpEg

Datei (keine Erweiterung)

Datei. (keineErweiterung)

Answer 3

Ich bin sicher, dass jemand meinen Code in Zukunft minifizieren und/oder optimieren kann und wird. Aber, ab jetzt im Augenblick Ich bin mir zu 200% sicher, dass mein Code in jeder einzelnen Situation funktioniert (z.B. nur mit dem nur Dateiname , mit relativ , Wurzel-relativ y absolut URL's, mit Fragment # Tags, mit Abfrage ? Saiten und was auch immer Sie sonst noch einsetzen wollen), einwandfrei und mit höchster Präzision.

Den Beweis finden Sie unter: https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php

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

Ich will nicht zu selbstbewusst sein oder mich selbst loben, aber ich habe noch keine jede Codeblock für diese Aufgabe (Finden der 'richtig' Dateierweiterung, inmitten einer Reihe von verschiedenen function Eingabeargumente), das genauso gut funktioniert wie dieses.

Nota: Wenn eine Dateierweiterung für die angegebene Zeichenkette nicht existiert, wird einfach eine leere Zeichenkette zurückgegeben "" weder ein Fehler noch eine Fehlermeldung.

Sie benötigt zwei Argumente:

• Zeichenfolge: fileNameOrURL (selbsterklärend)

• Boolesch: showUnixDotFiles (Ob Dateien, die mit einem Punkt "." beginnen, angezeigt werden sollen oder nicht)

Anmerkung (2): Wenn Ihnen mein Code gefällt, fügen Sie ihn unbedingt in Ihre JS-Bibliotheken und/oder Repo's ein, denn ich habe hart daran gearbeitet, ihn zu perfektionieren, und es wäre eine Schande, ihn zu verschwenden. Also, ohne weitere Umstände, 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;
    };

Viel Spaß! Sie sind herzlich willkommen!

Answer 4

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

Answer 5

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