[JavaScript] repalce(), replaceAll()

Javascript의 문자열에서 '특정 문자열'을 찾아서 '치환'해주는 방법인 replace()와 replaceAll()함수를 살펴보겠습니다.

 

replace()

"문자열".replace(searchValue, newValue);

• searchValue : 찾을 문자열 
• newValue : 변경할 문자열
• 원래의 문자열을 변경하지 않고, 새로운 문자열을 리턴합니다.
• 문자열 변수의 특정 문자를 제거하거나 모든 공백을 없앨 때 사용합니다.
• 대소문자를 구분하며, 첫 번째로 찾은 문자열만 치환해 줍니다.

let str = 'Park, Lee, Kim';

let replaced_str = str.replace('Lee', 'Son');

console.log(str); 	// 결과 : 'Park, Lee, Kim'
console.log(replaced_str);  // 결과 : 'Park, Son, Kim'

첫 번째로 찾은 문자열만 치환

let str = 'Park, Lee, Kim, Park';

let replaced_str = str.replace('Park', 'Hwang');

console.log(str); 	// 결과 : 'Park, Lee, Kim'
console.log(replaced_str);  // 결과 : 'Hwang, Lee, Kim, Park'

str 문자열에 Park 이 두개이지만 첫번째로 발견한 'Park'만 치환되고, 두번 째 'Park'은 그대로 출력된 것을 볼 수 있습니다.

 

대소문자를 구분

let str = 'Park, Lee, Kim';

let replaced_str = str.replace('Park', '@@');

console.log(replaced_str);  // 결과 : 'Park, Lee, Kim'

 

정규식을 이용하여 모든 문자열 치환

replaceAll()함수는 ES2021버전부터 새롭게 추가가 되었기 때문에 최신 개발환경이 아니라면 사용할 수 없습니다. 따라서 replace()에서 모든 문자열을 치환하려면 정규식을 사용해야 합니다. 

let str = 'Park, Lee, Kim, Park';

let replaced_str = str.replace(/Park/g, '@@');

console.log(replaced_str);  //결과 : '@@, Lee, Kim, @@'

 

modifiers	설명
i	검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정합니다.
g	검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정합니다.
m	검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정합니다.
y	대상 문자열의 현재 위치부터 비교를 시작하도록 설정합니다.

 

---

출처 :https://www.jopenbusiness.com/mediawiki/%ED%8C%8C%EC%9D%BC:RegExp_Cheatsheets.png

replaceAll()

replaceAll(pattern, replacement)

• pattern : 문자열이거나 Symbol.replace (en-US) 메서드가 있는 객체일 수 있습니다. (ex: 정규표현식)
• replacement : 문자열 이거나 함수일 수 있습니다.

let str = 'Park, Lee, Kim, Park';

let replaced_str = str.replaceAll('Park', '@@');

console.log(str); 	// 결과 : 'Park, Lee, Kim'
console.log(replaced_str);  // 결과 : '@@, Lee, Kim, @@'

위와 같이 기존 replace() 함수를 정규식을 이용하지 않고 함수 그대로 사용한다면 첫 번째로 발견되는 문자열만 치환되지만 replaceAll()함수는 모든 문자열을 치환하는 것을 볼 수 있습니다.

 

 

 

 

 

 

 

 

---

 

Reference

• Mdn web docs
• 모던 JavaScript
• https://www.jopenbusiness.com/mediawiki/