JavaScriptでファイル拡張子を取得する方法
コードを参照してください。
var file1 = "50.xsl";
var file2 = "30.doc";
getFileExtension(file1); //returns xsl
getFileExtension(file2); //returns doc
function getFileExtension(filename) {
/*TODO*/
}
新しい編集： この質問が最初に投稿されてから多くのことが変更されました - Wallacer's revised answer と VisioNの優秀な内訳 には本当に良い情報がたくさんあります
編集： これが一般に認められた答えだからです。 wallacer's answer は確かにはるかに優れています：
return filename.split('.').pop();
私の昔の答え：
return /[^.]+$/.exec(filename);
やるべきだ。
編集： PhiLhoのコメントを受けて、次のように入力してください。
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
return filename.split('.').pop();
複雑にしないでおく ：）
編集：
これは私がより効率的であると思うもう一つの非正規表現の解決策です：
return filename.substring(filename.lastIndexOf('.')+1, filename.length) || filename;
以下に、 VisioNの答え によって処理されるコーナーケースがいくつかあります。特に拡張子のないファイル（.htaccessなど）が含まれています。
非常に高性能で、ドットがない場合やドットの前に文字列がない場合は、完全な文字列ではなく""を返すことで、コーナーケースをほぼ確実に処理できます。それは読むのが難しいにもかかわらず非常によく練られた解決策です。それをあなたのヘルパーライブラリに貼り付けて、それを使うだけです。
旧編集：
拡張子のないファイルや拡張子のない隠しファイル（上記のTomの回答に対する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
これがもう少し複雑なケースの問題を解決するのに役立つことを願っています。パフォーマンスの面では、私はこの解決策が 正規表現より少し遅い と考えていますほとんどのブラウザで。しかしながら、最も一般的な目的のためには、このコードは完全に使えるはずです。
次の解決策は、 fast および short を一括操作で使用し、余分なバイトを節約するのに十分なものです。
return fname.slice((fname.lastIndexOf(".") - 1 >>> 0) + 2);
これはもう1つの非正規表現のユニバーサルソリューションです。
return fname.slice((Math.max(0, fname.lastIndexOf(".")) || Infinity) + 1);
どちらも拡張子を持たない名前（例：myfile）または.ドットで始まるもの（例：.htaccess）で正しく機能します。
"" --> ""
"name" --> ""
"name.txt" --> "txt"
".htpasswd" --> ""
"name.with.many.dots.myext" --> "myext"
速度が気になる場合は、 ベンチマーク を実行して、提供されているソリューションが最速であることを確認し、短いものは非常に高速です。
短い方の動作：
String.lastIndexOfmethodは、与えられた文字列（すなわちfname）内の部分文字列の最後の位置（つまり"."）を返します。部分文字列が見つからない場合、メソッドは-1を返します。- ファイル名の中のドットの "許容できない"位置は
-1と0で、それぞれ拡張子のない名前（例："name"）とドットで始まる名前（例：".htaccess"）を表します。 - ゼロ埋め右シフト演算子 （
>>>）をゼロと共に使用すると、-1を4294967295および-2を4294967294に変換する負の数に影響します。 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"
3つの亜種はすべてクライアント側の任意のWebブラウザで機能するはずであり、サーバー側のNodeJSコードでも使用できます。
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")
function getExt(filename)
{
var ext = filename.split('.').pop();
if(ext == filename) return "";
return ext;
}
var extension = fileName.substring(fileName.lastIndexOf('.')+1);
コード
/**
* 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警告.
function file_get_ext(filename)
{
return typeof filename != "undefined" ? filename.substring(filename.lastIndexOf(".")+1, filename.length).toLowerCase() : false;
}
var parts = filename.split('.');
return parts[parts.length-1];
速くてパスで正しく動作する
(filename.match(/[^\\\/]\.([^.\\\/]+)$/) || [null]).pop()
いくつかのEdgeケース
/path/.htaccess => null
/dir.with.dot/file => null
分割を使用したソリューションは遅く、lastIndexOfを使用したソリューションはEdgeのケースを処理できません。
これを試して：
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;
}
これを共有したいだけでした。
fileName.slice(fileName.lastIndexOf('.'))
これは拡張子のないファイルが最後の文字列を返すという落とし穴があります。あなたがそうするならば、これはあらゆることを直すでしょう：
function getExtention(fileName){
var i = fileName.lastIndexOf('.');
if(i === -1 ) return false;
return fileName.slice(i)
}
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");
}
}
私は、p4bl0の答えにコメントをつけるだけでは十分ではないことに気づいたのですが、Tomの答えは明らかに問題を解決しています。
return filename.replace(/^.*?\.([a-zA-Z0-9]+)$/, "$1");
私はパーティーに遅刻することが多いですが、簡単にするために私はこのようなものを使います
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>ほとんどのアプリケーションでは、次のような単純なスクリプトがあります。
return /[^.]+$/.exec(filename);
（Tomによって提供されているように）うまく機能するでしょう。しかし、これはばかげた証拠ではありません。次のファイル名を指定した場合は機能しません。
image.jpg?foo=bar
ちょっとやり過ぎかもしれませんが、予測不可能なファイル名による失敗を避けるために this this のようなURLパーサを使うことをお勧めします。
その特定の機能を使用して、あなたはこのようなファイル名を得ることができます：
var trueFileName = parse_url('image.jpg?foo=bar').file;
これはurl varsなしで "image.jpg"を出力します。それからあなたはファイル拡張子をつかむことが自由です。
return filename.replace(/\.([a-zA-Z0-9]+)$/, "$1");
edit：replaceメソッドの2番目の引数にある$1が奇妙に（あるいは多分そうではないかもしれませんが）うまくいかないようです…すみません。
// 获取文件后缀名
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"));特定の拡張子を探していてその長さがわかっている場合は、 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
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'）
あなたはそれがフィールド変更の上でそれをチェックすることができるように、常に拡張子lower casを返す：
file.JpEg
ファイル（拡張子なし）
ファイル。 （無延長）
クエリパラメータとurl内の文字も考慮する1行のソリューションです。
string.match(/(.*)\??/i).shift().replace(/\?.*/, '').split('.').pop()
// Example
// some.url.com/with.in/&ot.s/files/file.jpg?spec=1&.ext=jpg
// jpg
将来、誰かが私のコードを縮小したり最適化したりすることができるし、またそうするでしょう。しかし、現在の時点では、私のコードはあらゆる固有の状況で機能すると確信しています（たとえば、ファイル名のみ、相対、 root-relative、および絶対のURL、fragment#タグ、query?文字列、およびその他の文字列それに、完璧に、そしてピンポイント精度で。
証明のために、訪問しなさい： https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php
これがJSFiddleです： https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/ /
あまりにも自信を持っていたり、自分のラッパを吹いたりしてはいけませんが、このタスクのためのanyブロックのコードを見たことがありません（'correct'）これはfunction入力引数）と同じように動作します。
注： 指定された入力文字列にファイル拡張子が存在しない場合、設計上、エラーやエラーメッセージではなく、空の文字列""が返されるだけです。
2つの引数を取ります。
String： fileNameOrURL （自明）
Boolean： 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;
};
楽しい！どういたしまして。
fetchFileExtention(fileName) {
return fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
}
あなたがWeb 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
この簡単な解決策
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;
}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 を手動で含めることができます。
文字列分割や正規表現を行う理由はありません。
いくつかのファイルは拡張子を持たないことを忘れないでください。
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
Wallacerの答えはNiceですが、もう1つ確認が必要です。
ファイルに拡張子がない場合は、ファイル名を拡張子として使用することになりますが、これは不適切です。
これを試してください。
return ( filename.indexOf('.') > 0 ) ? filename.split('.').pop().toLowerCase() : 'undefined';
reduce および 配列の構造化を使用してファイル名と拡張子を取得する "one-liner" ：
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"
// }
var filetypeArray = (file.type).split("/");
var filetype = filetypeArray[1];
これはより良いアプローチです。
私はほとんどの場合lodashを使用することを好むので、これが解決策です。
function getExtensionFromFilename(filename) {
let extension = '';
if (filename > '') {
let parts = _.split(filename, '.');
if (parts.length >= 2) {
extension = _.last(parts);
}
return extension;
}
Node.jsでは、これは次のコードで実現できます。
var file1 ="50.xsl";
var path = require('path');
console.log(path.parse(file1).name);