파일업로드, 파일다운로드 기능을 구현하다가 보면 '파일의 이름'과 '파일의 확장자'를 따로 추출해서 사용해야하는 경우가 생깁니다. 이럴 때는 어떻게 하면 좋을까요?
substr함수와 lastIndexOf함수를 이용하면 쉽게 파일명과 확장자명을 추출 할 수 있습니다.
1. substr() 함수
문자열에서 특정 구간의 문자열을 탐색해서 추출해주는 함수이다. 파라미터로는 탐색구간의 시작인덱스(start index)와 탐색길이(length)를 number로 받는다.
<html>
<head>
</head>
<body>
파일 이름 나누기
<script>
let filename1 = "test.png"
// 탐색하려는 문자열(test.png)의 0번 인덱스 글자부터 1개 길이의 글자
let onlyname = filename1.substr(0, 1) // t
// 탐색하려는 문자열(test.png)의 2번 인덱스 글자부터 3개 길이의 글자
let onlyextention = filename1.substr(2, 3) // st.
console.log("onlyname: ", onlyname)
console.log("onlyextention: ", onlyextention)
</script>
</body>
</html>
2. lastIndexOf() 함수
이제 자르는걸 알았으니, lastIndexOf 함수도 같이 적용해보자. lastIndexOf는 파라미터로 받은 문자를 탐색하여, 그 문자가 마지막으로 등장하는 위치에 대한 index를 반환해준다.
파일이름에는 보통 '.'이 있다. lastIndexOf함수를 통해 '.'의 위치를 찾고, substr을 이용해 파일명과 확장자명을 추출해보자.
<html>
<head>
</head>
<body>
파일 이름 나누기
<script>
let filename1 = "test.png"
let filename2 = "document.xlsx"
let lastIndex = filename1.lastIndexOf('.') // 4
let onlyname = filename1.substr(0,lastIndex)
let onlyextention = filename1.substr(lastIndex)
console.log("onlyname: ", onlyname)
console.log("onlyextention: ", onlyextention)
</script>
</body>
</html>
'지금, 개발하기 > Javascript' 카테고리의 다른 글
| Javascript] array(배열) vs objec(객체) (0) | 2021.10.07 |
|---|---|
| javascript] 객체 반복문, for문으로 객체에서 key value 꺼내기 (1) | 2021.10.06 |
| Javascript] JSON과 JavaScript object 차이점 (0) | 2021.09.29 |
| Javascript] 화살표 함수 사용하기 (peat. Array.prototype.some()) (0) | 2021.09.28 |
| Javascript] 배열 메서드 every, some (0) | 2021.08.17 |
