Как я могу получить расширения файлов с помощью JavaScript?

Question

См. Код:

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

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

Answer 1

Я уверен, что кто-то может, и будет, минимизировать и / или оптимизировать мой код в будущем. Но с сейчас я на 200% уверен, что мой код работает в каждой уникальной ситуации (например, только с именем файла , с относительно , root-относительные и абсолютные URL-адреса, с фрагментом # тегами, запросом ? строк и всем остальным, что вы может решить бросить на это), безупречно, и с высокой точностью.

Для доказательства посетите: https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php

Вот JSFiddle: https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/

Не для того, чтобы быть самонадеянным или дуть в мою трубу, но я не видел какого-либо блока кода для этой задачи (найти 'правильное' расширение файла, среди батарея различных function входных аргументов), которая работает так же, как и эта.

Примечание: По умолчанию, если расширение файла не существует для данной входной строки, оно просто возвращает пустую строку "", ни ошибки, ни сообщения об ошибке.

Требуется два аргумента:

• Строка: fileNameOrURL (не требует пояснений)

• Boolean: showUnixDotFiles (Показывать или нет файлы, начинающиеся с точки ".")

Примечание (2): Если вам нравится мой код, обязательно добавьте его в свою библиотеку js и / или репозиторий, потому что я усердно работал над его совершенствованием, и было бы стыдно впустую. Итак, без лишних слов, вот оно:

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

Наслаждайтесь! Добро пожаловать!:

Answer 2

Однострочное решение, которое также будет учитывать параметры запроса и любые символы в URL.

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

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

Answer 3

Для этого в модуле path имеется стандартная библиотечная функция:

import path from 'path';

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

Выход:

.txt

Итак, если вам нужен только формат:

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

Если расширение отсутствует, функция вернет пустую строку:

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

Если вы используете Node, то path является встроенным. Если вы ориентируетесь на браузер, то Webpack поставит вам реализацию path. Если вы настраиваете браузер без Webpack, тогда вы можете вручную включить path-browserify .

Нет никаких причин для разделения строк или регулярных выражений.

Answer 4

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

Answer 5

Если вы имеете дело с веб-URL, вы можете использовать:

function getExt(filename){
    return filename.split('.').pop().split("?")[0].split("#")[0];
}

getExt("logic.v2.min.js") // js
getExt("http://example.net/site/page.php?id=16548") // php
getExt("http://example.net/site/page.html#welcome") // html

Демо: https://jsfiddle.net/squadjot/q5ard4fj/

Answer 6

Это простое решение

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

Тесты * * 1004 /* 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 7

Ответ Уоллесера хорош, но необходима еще одна проверка.

Если файл не имеет расширения, он будет использовать имя файла в качестве расширения, что не очень хорошо.

Попробуйте это:

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

Answer 8

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

Answer 9

Не забывайте, что некоторые файлы не могут иметь расширения, поэтому:

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

Answer 10

"одна строка", чтобы получить имя файла и расширение, используя reduce и деструктуризацию массива :

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

с лучшим отступом:

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('.')], [])


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