JavaScript를 사용하여 파일 확장자를 얻는 방법은 무엇입니까?
코드 참조:
var file1 = "50.xsl";
var file2 = "30.doc";
getFileExtension(file1); //returns xsl
getFileExtension(file2); //returns doc
function getFileExtension(filename) {
/*TODO*/
}
새로운 편집:이 질문이 처음 게시된 이후 많은 것이 바뀌었습니다.VisioN의 훌륭한 분석뿐만 아니라 Wallacer의 수정된 답변에도 매우 좋은 정보가 많이 있습니다.
편집: 이것이 인정된 답변이기 때문에 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
ifa.length하나는 확장자가 없는 가시적인 파일입니다.즉, 파일입니다.
ifa[0] === "" ★★★★★★★★★★★★★★★★★」a.length === 2.htaccess와 같은 확장자가 없는 숨김 파일입니다.access
이렇게 하면 조금 더 복잡한 사례에 대한 문제가 해결됩니다.성능 면에서는 이 솔루션이 대부분의 브라우저에서 regex보다 약간 느리다고 생각합니다.단, 대부분의 경우 이 코드를 완벽하게 사용할 수 있어야 합니다.
다음 솔루션은 벌크 작업에서 사용할 수 있을 정도로 빠르고 짧으며 추가 바이트를 절약할 수 있습니다.
return fname.slice((fname.lastIndexOf(".") - 1 >>> 0) + 2);
다음은 한 줄의 비regexp 유니버설솔루션을 나타냅니다.
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수 는 "Substring"을 반환합니다.-1.- 의 ""unacceptive"입니다.
-1★★★★★★★★★★★★★★★★★」0이름(예: 「명칭」)을 나타냅니다."name""점"으로 시작하는 이름:".htaccess"를 참조해 주세요. - 0 채우기 오른쪽 시프트 연산자(
>>>을 줍니다.-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"
이 세 가지 변형 모두 클라이언트 측 웹 브라우저에서 작동해야 하며 서버 측 노드에서 사용할 수 있습니다.JS 코드도 있습니다.
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")
.path 듈::
import path from 'path';
console.log(path.extname('abc.txt'));
출력:
.txt
따라서 형식만 원하는 경우:
path.extname('abc.txt').slice(1) // 'txt'
확장자가 없는 경우 함수는 빈 문자열을 반환합니다.
path.extname('abc') // ''
Node 를하고 있는 는, 「」를 해 주세요.path내장되어 있습니다. 웹 은 웹 팩을 .path구현이 가능합니다.웹 팩을 사용하지 않고 브라우저를 대상으로 하는 경우 수동으로 경로 브라우저를 포함할 수 있습니다.
문자열 분할 또는 정규식을 수행할 필요가 없습니다.
function getExt(filename)
{
var ext = filename.split('.').pop();
if(ext == filename) return "";
return ext;
}
var extension = fileName.substring(fileName.lastIndexOf('.')+1);
Web URL 를 취급하고 있는 경우는, 다음을 사용할 수 있습니다.
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/
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
};
시험
쿼리가 없는 경우에도 fragment가 존재할 수 있습니다.
"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
분할을 사용하는 솔루션은 느리고 lastIndexOf를 사용하는 솔루션은 엣지 케이스를 처리하지 않습니다.
// 获取文件后缀名
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"));그냥 이걸 공유하고 싶었어요
fileName.slice(fileName.lastIndexOf('.'))
이 경우 확장자가 없는 파일은 마지막 문자열을 반환하지만 이렇게 하면 모든 것이 수정됩니다.
function getExtention(fileName){
var i = fileName.lastIndexOf('.');
if(i === -1 ) return false;
return fileName.slice(i)
}
"1-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('.')], [])
console.log({filename, extension});
// {
// "filename": "filename.with_dot",
// "extension": "png"
// }
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;
}
//실행렬
확장 파일jpeg')
는 항상 내선 하위 캐스를 반환하므로 필드 변경 시 다음 작업을 확인할 수 있습니다.
파일.JpEg
파일(확장자 없음)
파일(확장자 없음)
이 간단한 솔루션
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;
}누군가 내 코드를 최소화하거나 최적화할 수 있고 앞으로도 그럴 것입니다.그러나 현재로선 모든 고유한 상황에서 코드가 작동한다고 확신합니다(예를 들어 파일 이름, 상대 URL, 루트 상대 URL, 절대 URL, fragment 포함). #태그, 쿼리 포함 ?스트링과 그 외 어떤 것을 던질지 모르는 것), 흠잡을 데 없이 핀포인트 정밀하게 사용할 수 있습니다.
증명에 대해서는, https://projects.jamesandersonjr.com/web/js_projects/get_file_extension_test.php 를 참조해 주세요.
JSFiddle은 다음과 같습니다.https://jsfiddle.net/JamesAndersonJr/ffcdd5z3/
과신하거나 트럼펫을 불지는 않지만, 이 태스크의 코드 블록은 본 적이 없습니다(다양한 배터리 속에서 '올바른' 파일 확장자를 찾습니다).functionarguments로 동작합니다.input arguments).
주의: 지정된 입력 문자열에 대한 파일 확장자가 존재하지 않으면 빈 문자열만 반환합니다.""에러도, 에러 메시지도 아닙니다.
여기에는 다음 두 가지 인수가 필요합니다.
문자열: fileNameOrURL (자체 교육)
부울: 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;
};
즐기세요! 천만에요!
ES6 파괴를 사용하는 간단한 접근법도 있습니다.
const path = 'hello.world.txt'
const [extension, ...nameParts] = path.split('.').reverse();
console.log('extension:', extension);이것을 시험해 보세요.
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;
}
특정 내선번호를 찾고 있고 그 길이를 알고 있는 경우, 다음과 같이 기판을 사용할 수 있습니다.
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
p4bl0의 답변에 코멘트를 다는 것만으로는 부족하다는 것을 깨달았습니다만, Tom의 답변은 문제를 명확하게 해결했습니다.
return filename.replace(/^.*?\.([a-zA-Z0-9]+)$/, "$1");
대부분의 애플리케이션에서 다음과 같은 간단한 스크립트
return /[^.]+$/.exec(filename);
(톰이 제공한 대로) 정상적으로 동작합니다.하지만 이것은 바보같은 증거가 아니다.다음의 파일명을 지정하면, 동작하지 않습니다.
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");
}
}
나는 파티에 많이 늦었지만, 간단히 하기 위해 이런 것을 사용한다.
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
return filename.replace(/\.([a-zA-Z0-9]+)$/, "$1");
편집: 이상하게도 (혹은 아닐 수도 있습니다)$1치환 방법의 두 번째 주장은 효과가 없는 것 같습니다.
fetchFileExtention(fileName) {
return fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
}
Wallacer의 답변은 좋지만, 한 번 더 확인해야 합니다.
파일에 확장자가 없는 경우 파일 이름이 확장자로 사용되며 이는 좋지 않습니다.
이것을 사용해 보세요.
return ( filename.indexOf('.') > 0 ) ? filename.split('.').pop().toLowerCase() : 'undefined';
일부 파일에는 확장자를 사용할 수 없으므로 다음을 수행할 수 있습니다.
var parts = filename.split('.');
return (parts.length > 1) ? parts.pop() : '';
언급URL : https://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
'sourcecode' 카테고리의 다른 글
| 변수 앞에 더하기 기호가 있는 목적은 무엇입니까? (0) | 2022.09.22 |
|---|---|
| MySQL에서 날짜 범위의 중복 확인 (0) | 2022.09.22 |
| MariaDB 10.2.16 데이터베이스 서버를 시작하지 못했습니다. (0) | 2022.09.22 |
| mockito를 사용한 개인 메서드 테스트 (0) | 2022.09.22 |
| PHP 문자열 끝에 있는 모든 특정 문자를 제거하려면 어떻게 해야 합니까? (0) | 2022.09.22 |