如何使用 JavaScript 获取文件扩展名？

Question

见代码：

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

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

Answer 1

较新的编辑：自从这个问题最初发布以来，很多事情都发生了变化——wallacer's revised answer 和 VisioN's excellent breakdown 中有很多非常好的信息

---

编辑：仅仅因为这是公认的答案； wallacer's answer 确实好很多：

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

---

我的旧答案：

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

应该这样做。

编辑：为了回应 PhiLho 的评论，请使用如下内容：

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

Answer 2

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

编辑：

这是另一种我认为更有效的非正则表达式解决方案：

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

下面的VisioN's answer 可以更好地处理一些极端情况，尤其是没有扩展名的文件（包括.htaccess 等）。

它的性能非常好，并且当点之前没有点或没有字符串时，通过返回"" 而不是完整的字符串，以一种可以说更好的方式处理极端情况。这是一个精心设计的解决方案，尽管很难阅读。将它粘贴到您的助手库中并使用它。

旧编辑：

如果您要遇到没有扩展名的文件或没有扩展名的隐藏文件（请参阅 VisioN 对上面汤姆的回答的评论），那么更安全的实施方式将是这样的

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

如果a.length 为1，则它是一个没有扩展名的可见文件，即。 文件

如果a[0] === "" 和a.length === 2 它是一个没有扩展名的隐藏文件，即。 .htaccess

这应该可以解决稍微复杂一些的问题。在性能方面，我认为这个解决方案在大多数浏览器中是a little slower than regex。然而，对于最常见的目的，这段代码应该是完全可用的。

Answer 3

以下解决方案 fast 和 short 足以用于批量操作并节省额外字节：

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

这是另一种单行非正则表达式通用解决方案：

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

对于没有扩展名的名称（例如 myfile）或以 . 点开头的名称（例如 .htaccess），两者都可以正常工作：

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

如果您关心速度，您可以运行 benchmark 并检查提供的解决方案是最快的，而短的解决方案非常快：

短款的工作原理：

1. String.lastIndexOf 方法返回给定字符串（即fname）中子字符串（即"."）的最后位置。如果未找到子字符串，则方法返回 -1。
2. 文件名中“不可接受”的点位置是-1 和0，它们分别指的是没有扩展名的名称（例如"name"）和以点开头的名称（例如".htaccess"）。
3. Zero-fill right shift operator (>>>) 如果与零一起使用会影响将-1 转换为4294967295 和-2 到4294967294 的负数，这对于在边缘情况下保持文件名不变很有用（这里有点技巧)。
4. String.prototype.slice 从按所述计算的位置提取文件名的一部分。如果位置编号大于字符串的长度，方法返回""。

---

如果您想要以相同方式工作的更清晰的解决方案（加上对完整路径的额外支持），请查看以下扩展版本。此解决方案将比以前的单行方法慢，但更容易理解。

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"

所有三种变体都可以在客户端的任何 Web 浏览器中运行，也可以在服务器端的 NodeJS 代码中使用。

Answer 4

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

经过测试

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

还有

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

Answer 5

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

Answer 6

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 7

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

Answer 8

如果您正在处理网页网址，您可以使用：

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

演示：https://jsfiddle.net/squadjot/q5ard4fj/

Answer 9

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

Answer 10

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

Answer 11

代码

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

测试

请注意，在没有查询的情况下，片段可能仍然存在。

"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 个警告。

Answer 12

快速且可正确使用路径

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

一些极端情况

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

使用 split 的解决方案速度很慢，而使用 lastIndexOf 的解决方案无法处理边缘情况。

Answer 13

// 获取文件后缀名
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"));

Answer 14

我只是想分享这个。

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

虽然这有一个缺点，即没有扩展名的文件将返回最后一个字符串。 但如果你这样做，这将解决所有问题：

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

Answer 15

我相信将来有人可以并且将会缩小和/或优化我的代码。但是，截至 现在，我 200% 确信我的代码适用于每一种独特的情况（例如，仅使用 文件名，使用 relative em>、root-relative 和 absolute URL，带有 fragment # 标签，带有 query @987654324 @ 字符串，以及您可能决定扔给它的任何其他内容），完美无瑕，并且具有精确度。

如需证明，请访问：https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php

这是 JSFiddle：https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/

不要过于自信，也不要自吹自擂，但我还没有看到 任何 用于此任务的代码块（找到 '正确' 文件扩展名，在一组不同的function 输入参数中），效果和这个一样。

注意：按照设计，如果给定的输入字符串不存在文件扩展名，它只会返回一个空白字符串""，而不是错误，也不是错误消息。

需要两个参数：

• 字符串： fileNameOrURL （不言自明）

• 布尔值： showUnixDotFiles（是否显示以点“.”开头的文件）

注意（2）：如果您喜欢我的代码，请务必将其添加到您的 js 库和/或 repo 中，因为我努力完善它，这将是一种耻辱去浪费。所以，事不宜迟，这里是：

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 16

"one-liner" 使用reduce 和array destructuring 获取文件名和扩展名：

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


console.log({filename, extension});

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

Answer 17

还有一种使用 ES6 解构的简单方法：

const path = 'hello.world.txt'
const [extension, ...nameParts] = path.split('.').reverse();
console.log('extension:', extension);

Answer 18

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

//用法

扩展名（'file.jpeg'）

始终返回扩展小写，以便您可以在字段更改时检查它 适用于：

文件.JpEg

文件（无扩展名）

文件。 （无扩展名）

Answer 19

试试这个：

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

Answer 20

如果你正在寻找一个特定的扩展并且知道它的长度，你可以使用substr：

var file1 = "50.xsl";

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

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

Answer 21

这个简单的解决方案

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

测试

/* 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 22

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

编辑：奇怪（或者可能不是）替换方法的第二个参数中的$1 似乎不起作用......对不起。

Answer 23

我刚刚意识到仅仅对 p4bl0 的回答发表评论是不够的，尽管 Tom 的回答清楚地解决了问题：

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

Answer 24

对于大多数应用程序，一个简单的脚本，例如

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

可以正常工作（由 Tom 提供）。然而，这并不是万无一失的。如果提供以下文件名则不起作用：

image.jpg?foo=bar

这可能有点矫枉过正，但我​​建议使用 url 解析器，例如 this one，以避免由于不可预测的文件名而导致失败。

使用该特定函数，您可以获得如下文件名：

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

这将输出不带 url 变量的“image.jpg”。然后你就可以随意获取文件扩展名了。

Answer 25

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

Answer 26

我迟到了很多个月，但为了简单起见，我使用了这样的东西

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>

Answer 27

一种单行解决方案，还可以考虑查询参数和 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 28

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

Answer 29

Wallacer 的回答很好，但需要再检查一次。

如果文件没有扩展名，它将使用文件名作为扩展名，这是不好的。

试试这个：

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

Answer 30

别忘了有些文件可以没有扩展名，所以：

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