7. 문자열 변환 replace, replaceAll, substring

개요

포트폴리오를 만들던도중 문자열 변환을 해야할 상황이 찾아왔다.

크롤링한 각 사이트의 날짜양식이 달랐기때문이다.

양식을 통일하기위해 문자열을 변환해야했으며, 존재만 알았지 실제로 코드에 적용해본적 없는 메서드들이라

예상한 시간보다 쪼끔 더 헤맸다. 그런 기념으로 어떻게 사용했는지 기록하고자한다.

둘의 날짜양식이 다르다!!!!!

 

나는 공간을 더 적게 차지하여 비교적 눈이 편안한 우측의 00.00.00-00.00.00 양식으로 통일하기로 했다.

그럴려면 우측에서 삭제해야할 문자열은 공백, / , 연도 앞 2자리 총 3가지 문자열을 삭제하고,

/ 의 자리에는 . 을 넣어주어야했다.

사용한 메소드들의 기능을 다시 한번 훑고가자.

 

replace

replace 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분을 원하는것으로 교체한 새로운 문자열을 반환한다.

패턴은 어떤 문자열이나, 첫번째 인자에 패턴을 넣고, 두번째 인자에 교체할 문자열을 넣는다.

정규식이 될 수 있다. 아래 간단한 예제를 살펴보자

let str = "안녕하십니까! sungtt입니다.";
let result = str.replace("안녕하","잘지내");
console.log(result); // 잘지내십니까! sungtt입니다.

 

그렇지만 첫번째로 일치된 패턴만 변경한다는 점을 주의하자.

let str = "안녕하십니까! sungtt입니다. 안녕하";
let result = str.replace("안녕하","잘지내");
console.log(result); // 잘지내십니까! sungtt입니다. 안녕하

 

패턴과 일치하는 모든 문자열을 변환하고싶다면 정규표현식을 사용해도된다.

니라는 문자열을 네로 변경한다.

표현식 뒤의 g는 global이라는 뜻으로 일치하는 패턴의 모든 문자열을 변경해준다.

 

 

let str = "안녕하십니까! sungtt입니다.";
let result = str.replace(/니/g,"네");
console.log(result); // 안녕하십네까! sungtt입네다.

 

replaceAll

ECMA-262 12th(2021)스펙을 기준으로 추가된 메서드다.

이전에는 자바스크립트에 replaceAll이 없었기때문에 앞서 소개한 정규표현식을 통해 기능을 대체할 수 있었다.

let str = "안녕하십니까! sungtt입니다.";
let result = str.replaceAll("니","네");
console.log(result); // 안녕하십네까! sungtt입네다.

 

substring

문자열을 index를 참조하여 잘라낸 문자열을 반환해준다.

이미지출처 : https://coding-factory.tistory.com/126

 

첫번째 인자로는 자르기 시작할 index를, 두번째 인자로는 종료할 index를 전달해준다.

인자를 하나만 전달하면 그 번호부터 마지막까지 잘라낸 문자열을 반환한다.

let str = "안녕하십니까! sungtt입니다.";

let result = str.substring(0,7);
console.log(result); // 안녕하십니까!

let result2 = str.substring(8,18);
console.log(result2); // sungtt입니다.

let result3 = str.substring(8);
console.log(result3); // sungtt입니다.

 

 

적용하기!

실제 코드는 이렇게 작성하였다.

1. / 를 . 으로 변환

2. 공백을 제거

3. 연도 앞 2자리 20을 제거

let str = "2022 / 02 / 22 - 2022 / 03 / 14";
let result = str.replace(/[/]/g,".").replace(/ /g,"").replaceAll("20","")
console.log(result); // 22.02.22-22.03.14