[JAVASCRIPT] 문자열 메서드 : replace( ) / replaceAll( )

자바스크립트 : 문자열 메서드 : replace()

이번 시간에는 문자열 메서드인 replace()에 대해 알아보겠습니다! 😁

---

#1. replace( )

replace() 메서드는 String.prototype.replace()의 약자로 문자열을 치환하거나 변환 할 때 사용하는 메서드입니다. 즉 문자열을 부분 문자열로 구분하고 변환하여 새로운 배열로 반환해줍니다.

! replace( ) 사용 방법 !
"문자열"replace("찾을 문자열", "변경할 문자열");
"문자열"replace("찾을 문자열", "변경할 문자열");
"문자열"replace(정규식);
"문자열"replace(정규식, "변경할 문자열");

const str1 = "javascript reference";

const cirrentStr1 = str1.replace("javascript", "자바스크립트"); // 자바스크립트 reference
const cirrentStr2 = str1.replace("j", "J");     // Javascript reference
const cirrentStr3 = str1.replace("e", "E");     // javascript rEference : e가 여러개일 경우 처음 문자만 E로 변경된다. 모두 변경시키려면 replaceAll() 또는 정규식인 /g를 사용하면 된다.
const cirrentStr4 = str1.replace(/e/g, "E");    //javascript rEfErEncE : 정규식 /문자/g 사용하여 모두 변경하기 : /g -> 전역 /i -> 대소문자 무시
const cirrentStr5 = str1.replace(/e/gi, "E");   //javascript rEfErEncE

//이미지 명칭 바꾸기 : 충돌이 일어날 수 있으니 변경할 때 문자열을 상세히 적습니다.
const str2 = "http://www.naver.com/img01.jpg";
const cirrentStr6 = str2.replace("img01.jpg", "img02.jpg"); //http://www.naver.com/img02.jpg


const str3 = "010-2000-1000";
const cirrentStr7 = str3.replace("-", "");      //0102000-1000
const cirrentStr8 = str3.replace(/-/g, ""); //01020001000 : 정규식 사용 //
const cirrentStr9 = str3.replace(/-/g, " "); //010 2000 1000
const cirrentStr10 = str3.replace(/-/g, "★"); //010★2000★1000
const cirrentStr11 = str3.replace(/[1-9]/g, "★"); //0★0-★000-★000 : 0을 제외한 나머지 숫자를 ★로 바꾸기 : 알고리즘에서 많이 사용

! point ! 문자열에서 변경하려는 문자열이 여러개일 경우, 첫번째로 발견한 문자열만 변환해줍니다.
이때 정규식인 /g를 사용하면 모든 문자열을 변환해줍니다.

---

#2. replaceAll( )

replaceAll() 메서드는 replace()와 동일하지만 변경하려는 문자열이 여러개인 경우 해당하는 모든 문자열을 변환해준다는 차이점이 있습니다!

! replaceAll( ) 사용 방법 !
"문자열"replaceAll("찾을 문자열", "변경할 문자열");
"문자열"replaceAll("찾을 문자열", "변경할 문자열");
"문자열"replaceAll(정규식);
"문자열"replaceAll(정규식, "변경할 문자열");

const str1 = "javascript reference";
const cirrentStr4 = str1.replaceAll("e", "E");  // javascript rEfErEncE

const str3 = "010-2000-1000";
const cirrentStr9 = str3.replaceAll("-", "");   //01020001000

! point ! 문자열에서 변경하려는 문자열이 여러개일 경우, 모든 문자열을 변환해줍니다.