Programming

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

procodes 2020. 2. 16. 20:49

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

코드보기 :

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

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

최신 편집 : 이 질문이 처음 게시 된 이후 많은 것들이 변경되었습니다 .Wallacer의 수정 된 답변 에는 VisioN의 훌륭한 분석 뿐만 아니라 많은 훌륭한 정보가 있습니다.

편집 : 이것은 이것이 허용되는 대답이기 때문에; wallacer의 답변 은 실제로 훨씬 좋습니다.

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하나 인 경우 확장자가없는 가시적 인 파일입니다. 파일

만약 a[0] === ""그리고 a.length === 2그것은 확장자의 예와 숨겨진 파일입니다. .htaccess

좀 더 복잡한 경우의 문제를 해결하는 데 도움이되기를 바랍니다. 성능면 에서이 솔루션은 대부분의 브라우저에서 정규식보다 약간 느립니다 . 그러나 가장 일반적인 목적으로이 코드를 완벽하게 사용할 수 있어야합니다.

다음 솔루션은 신속 하고 짧은 대량 작업과 추가 바이트 저장 사용하기에 충분한 :

 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"

속도에 관심이 있다면 벤치 마크를 실행 하고 제공된 솔루션이 가장 빠른 반면 짧은 솔루션이 엄청 빠른지 확인할 수 있습니다.

속도 비교

짧은 것이 작동하는 방법 :

String.lastIndexOf메소드는 "."주어진 문자열 (ie fname) 에서 부분 문자열 (ie ) 의 마지막 위치를 반환합니다 . 부분 문자열을 찾지 못하면 메소드가를 반환합니다 -1.
파일 이름에서 점의 "허용 할 수없는"위치는 -1및 0이며 각각 확장자가없는 "name"이름 (예 :)과 점으로 시작하는 이름 (예 :)을 나타 ".htaccess"냅니다.
제로 채우기 오른쪽 이동 연산자 ( >>>)가 0과 함께 사용되면 and 로 변환 -1되는 음수에 영향을 미치며 ,이 경우 파일 이름이 엣지 케이스에서 변경되지 않은 상태로 유지하는 데 유용합니다 (여기에서 트릭 정렬).4294967295-24294967294
String.prototype.slice설명 된대로 계산 된 위치에서 파일 이름의 일부를 추출합니다. 위치 번호가 문자열 길이보다 길면를 반환합니다 "".

동일한 방식으로 작동하고 (전체 경로를 추가로 지원하는)보다 명확한 솔루션을 원하면 다음 확장 버전을 확인하십시오. 이 솔루션은 이전 one-liner보다 느리지 만 이해하기는 훨씬 쉽습니다.

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"

세 가지 변형 모두 클라이언트 측의 모든 웹 브라우저에서 작동해야하며 서버 측 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);

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

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

암호

/**
 * 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 경고.

빠르고 경로와 올바르게 작동

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

일부 엣지 케이스

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

split을 사용하는 솔루션은 느리고 lastIndexOf가있는 솔루션은 엣지 케이스를 처리하지 않습니다.

나는 단지 이것을 공유하고 싶었다.

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

확장명이없는 파일은 마지막 문자열을 반환한다는 오류가 있습니다. 그러나 그렇게하면 모든 것이 수정됩니다.

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

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

이 시도:

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

앞으로 누군가가 내 코드를 축소 및 / 또는 최적화 할 수 있고 또하겠다고 확신합니다. 그러나 지금 당장 내 코드는 모든 고유 한 상황 (예 : 파일 이름 만 , 상대 , 루트 상대 및 절대 URL, 조각 # 태그, 쿼리 ? 문자열 등) 에서 작동한다고 200 % 확신합니다. 그렇지 않으면 완벽하게 핀 포인트 정밀도로 던질 수 있습니다.

증거를 보려면 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;
    };

즐겨! 천만에요! :

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

편집 : $1replace 메소드의 두 번째 인수에서 이상하게 (또는 아닐 수도 있습니다) 작동하지 않는 것 같습니다 ... 죄송합니다.

Tom의 답변이 분명히 문제를 해결하지만 p4bl0의 답변에 의견을 작성하는 것만으로는 충분하지 않다는 것을 깨달았습니다.

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

대부분의 응용 프로그램의 경우 다음과 같은 간단한 스크립트

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

Tom이 제공 한대로 잘 작동합니다. 그러나 이것은 바보 증거가 아닙니다. 다음 파일 이름이 제공되면 작동하지 않습니다.

image.jpg?foo=bar

그것은 조금 잔인한있을 수 있지만 같은 URL 파서를 사용하는 것이 좋습니다 것 이것 으로 인해 예측할 수없는 파일 이름을 피하기 실패합니다.

특정 기능을 사용하면 다음과 같은 파일 이름을 얻을 수 있습니다.

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

URL 변수없이 "image.jpg"를 출력합니다. 그런 다음 파일 확장자를 자유롭게 확보 할 수 있습니다.

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

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')

필드 확장이 작동하는지 확인할 수 있도록 항상 확장 하단 cas를 반환합니다.

file.JpEg

파일 (확장자 없음)

파일. (확장)

특정 확장을 찾고 길이를 알고 있으면 substr 을 사용할 수 있습니다 .

var file1 = "50.xsl";

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

자바 스크립트 참조 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr

나는 파티에 늦게 많은 달이지만 간단하게하기 위해 나는 이와 같은 것을 사용한다

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>

쿼리 매개 변수와 URL의 모든 문자를 설명하는 한 줄 솔루션입니다.

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

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

이 간단한 솔루션

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없이 브라우저를 대상으로하는 경우 경로 브라우저를 수동으로 포함 할 수 있습니다.

문자열 분할 또는 정규식을 수행 할 이유가 없습니다.

Wallacer의 답변은 훌륭하지만 한 번 더 확인해야합니다.

파일 확장자가 없으면 파일 이름을 확장자로 사용하여 좋지 않습니다.

이걸로 해봐:

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

일부 파일의 확장자는 없어야합니다.

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

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

웹 URL을 다루는 경우 다음을 사용할 수 있습니다.

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

getExt("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/

var filetypeArray = (file.type).split("/");
var filetype = filetypeArray[1];

이것은 더 나은 접근 방식입니다.

참고 URL : https://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript

'Programming' 카테고리의 다른 글

C #에서 선택적 매개 변수를 어떻게 사용할 수 있습니까? (0)	2020.02.16
쿼리 빌더가 원시 SQL 쿼리를 문자열로 출력하도록하려면 어떻게해야합니까? (0)	2020.02.16
int.Parse ()와 Convert.ToInt32의 주요 차이점은 무엇입니까 (0)	2020.02.15
SecurityError : 출처가있는 프레임이 교차 출처 프레임에 액세스하지 못하도록 차단 (0)	2020.02.15
SQL SELECT WHERE 필드는 단어를 포함합니다 (0)	2020.02.15

현재글JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

procodes

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

이 간단한 솔루션

테스트

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

JavaScript로 파일 확장자를 얻으려면 어떻게해야합니까?

이 간단한 솔루션

테스트

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바