[JavaScript] 문자열 치환- replaceAll() 대신 replace()와 regex

다음과 같이 문자열에서 매칭 되는 모든 단어를 치환할 필요가 생겼습니다.

"Lai is Cute. I love Lai."
// Lai 대신 Happy로 바꾸고 싶네요.
"Happy is Cute. I love Happy."

 

String.replace() 를 평소의 방법으로만 사용하면, 매칭 되는 가장 첫 단어만 치환이 되니 다른 방법이 필요합니다.

const sentence = "Lai is Cute. I love Lai.";
console.log(sentence.replace("Lai", "Happy"));
// "Happy is Cute. I love Lai."

 

모든 매칭되는 부분을 치환하기 위해서는 두 가지 방법이 있습니다.

 

1. String.replaceAll() 사용하기 (주의: 호환성)

const sentence = "Lai is Cute. I love Lai.";
console.log(sentence.replaceAll("Lai", "Happy"));
// "Happy is Cute. I love Happy."

가장 간단한 방법으로 위와 같이 String.replaceAll()을 사용해보았습니다.

그러나 String.replaceAll() 은 ECMAScript 2021에 새로 등장한 함수입니다.

하위 브라우저 호환성을 고려하는 상황에서는 주의를 할 필요가 있습니다.

 

https://caniuse.com/?search=replaceAll (2021/09/27)

 

2. String.replace() 와 regex를 사용하기

const sentence = "Lai is Cute. I love Lai.";
console.log(sentence.replace(/\Lai/g, "Happy"));
// "Happy is Cute. I love Happy."

위와 같이 String.replace() 에 정규식을 붙여서 모든 단어를 치환하면 됩니다.

 

참고하세요

String.replaceAll() 에도 정규식을 넣을 수 있습니다.

정규식을 만들거나 확인할 필요가 있을 때는 regexr.com을 사용하고 있습니다. https://regexr.com

 

 

참고한 링크

MDN Reference - replaceAll: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

MDN Reference - replace: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

ECMAScript 2021 New Features: https://www.geeksforgeeks.org/new-features-in-ecmascript-2021-update/

Stack Overflow: https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript