만약 파일의 확장자(이미지라면 jpg, gif, png등이 되겠군요...) 값만 불러오게 하려면 어떻게 해야할까요? 가장 쉬운 방법으로 정규표현식을 사용할 수 있겠습니다. 그리고 확장자는 .(마침표)을 기준으로 나뉠 수 있기 때문에 만약 파일에서 period인 . 기호가 한개라면 split() 함수를 사용할 수도 있겠습니다. 그럼 아래 예제를 참고하세요.


! 파일 확장자만 가져오는 방법 예제소스 코드보기


아래와 같이 test 변수가 존재하고 값이 imagefile.jpg 라는 값을 가지는 경우 어떻게 해서 jpg라는 확장자만 가져올 수 있는지 알아보세요. 먼저 정규표현식을 사용해서 알아보도록 하겠습니다. 정규표현식은 패턴과 매칭되는 문자열을 검색하거나 변경하는데 매우 유용하게 사용됩니다.


! 정규표현식을 사용한 방법



<script>
var test = 'imagefile.jpg';

var pattern = /\w+./;
// 찾을 문자 패턴을 입력

var test2 = test.replace(pattern, '');
// replace함수와 정규표현식을 사용해 확장자가 아닌 부분을 삭제

alert(test2);
</script>


간단하게 설명드리면 test변수에서 확장자만 남기고 이 값을 test2에 저장합니다. 먼저 패턴에 사용한 문자를 보시면 // 두개의 슬러쉬는 정규표현식을 의미하며 이 안에는 특정 패턴에 사용될 용어 및 연산자가 포함됩니다.
그리고 여기서 사용된 w와 +는 다음과 같습니다.

w : 숫자와 알파벳(대소문자 구분없이)을 의미함
+ : 최소 한번에서 다수의 반복을 의미

즉, 위 기호는 숫자 및 알파벳이 계속되서 반복되는 범위를 의미하며 이를 없애도록 replace()의 두번째 매개변수에 '' ... 공백을 사용해 삭제하도록 하였습니니다.

출력되는 값은 jpg가 될 것입니다.


!! split() 함수를 사용하는 방법


split() 함수는 해당하는 문자열을 매개변수를 기준으로 나누어 배열값으로 저장, 반환합니다. 우리가 만약 '.'을 기준으로 split() 함수를 사용할 경우 반환되는 배열의 두번째 값은 jpg가 될 것입니다. 아래 예제를 참고하세요.


<script>
var test = 'imagefile.jpg';
test = test.split('.');

alert(test[1]); // jpg를 출력
</script>


첫번째 방법보다 간단하죠? 한가지 더 알아보겠습니다. 만약 '.'이 하나가 아니라 두개라면 어떻게해야할까요... 아래의 예제를 보세요.


<script>
var test = 'imagefile.test.jpg';
test = test.split('.');

alert(test[test.length-1]); // jpg를 출력
</script>


달라진건 크게 없습니다. 단지 test배열의 마지막 값을 불러오기 위해 test.length에서 하나를 빼고 이를 각괄호[] 안에 넣어서 비교적 간단하게 해결하였습니다.