JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기)

파일 전송시, 썸네일(미리보기)와 파일명을 함께 보여주는 기능을 구현 중이다.

이미지 파일이 아닐 때, 썸네일에 파일확장자만 보여주려고 한다. 

 

결과화면 미리보기 

이렇게 파일확장자가 썸네일(미리보기)부분에 나온다. 그럼 시작해보자! 

 

---

JavaScript - split으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기)

 

기본 아이디어는 이렇다 !

- split() 함수로 파일 이름을 ' . '(쩜) 을 기준으로 양옆으로 분리한다. ex) 새발.jpg 라고 하면 ' 새발 ' 과 ' jpg ' 로 분리된다.
- ' . ' (쩜) 뒤의 확장자만 문자 배열로 따로 빼내버리는 것이다! ex) saebal[1] 을 호출하면 ' jpg ' 가 호출된다.

 

split() 간단 원리 설명 

 

아래 문자열을 잘라보자. 문자열에 있는 ' . ' 처럼 특정 문자를 기준으로 문자열을 자를려면 split() 을 사용하면 된다.

const saebal ='새발.jpg';

 

이렇게 split() 함수에 잘라내는데 기준이 될 문자열을 넣으로 문자열을 잘라 배열로 넘겨준다.

각 배열에 " 새발 ", " jpg "가 담겨진 걸 확인 할 수 있다.

const saebalArr = saebal.split('.');
console.log(saebalArr[0], saebalArr[1]);  // 각 배열에 새발, jpg가 담겨진 걸 확인 할 수 있다.

 

파일 확장자만 분리하기

자, 이제 리액트에 응용해보자.  props 로 filename을 받아왔다. 

const fileName = props.filename.split('.') 	    // .(쩜) 기준 문자배열로 분리하기 
const fileExtension = fileName[fileName.length - 1] // 가장 마지막의 확장자를 정의

 

HTML 코드를 살펴보자. 삼항연산자로 특정 확장자일 때만 확장자명이 보여지도록 하였다.

  <div className="file-download">
    {fileExtension !== 'png' ? 		      	       // 확장자가 png가 아니면 ?
      <img className="thumbnail" src={dummy} />        // 썸네일 이미지를 보여주고
      :						       // 그렇지 않으면
      <div className="thumbnail">{fileExtension}</div> // 확장자명을 보여주기
    }
    <a target="_blank" download onClick={() => fileDownload(props.msg.id)}> 
      {props.filename}
      <img src={downloadImg} alt="" />
    </a>
  </div>

 

CSS 를 살펴보자. 여기서 중요한 점은 text-transform 으로 대문자 변환을 해준 것이다.

.thumbnail { 
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  text-transform: uppercase; // 확장자를 대문자로 만들어줌
  user-select: none; 	     // 썸네일 문자영역에서 마우스가 I 모양이 되지 않음 
}

 

결과 화면

짜잔 확장자만 썸네일에 쏙 이쁘게 잘나온다.

 

 

 

ref: https://squll1.tistory.com/entry/javascript-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%9E%90%EB%A5%B4%EA%B8%B0-split-substring-substr