정규 표현식(RegEx)과 replace() 메서드를 활용하여 JavaScript에서 단어(문자열)의 모든 인스턴스를 한 번에 교체하는 방법을 알아보세요.
문자열 치환이 필요한 상황
예를 들어 회사의 최신 제품을 소개하는 긴 텍스트 블록이 있는데, 안타깝게도 특정 단어가 여러 번 잘못 표기되어 있다고 가정해 보겠습니다. 아래 텍스트 블록은 "Glorious Games"가 아니라 "Epic Games"라고 적혀야 했던 문장입니다:
const textBlock =
"We at Glorious Games, are very proud to present the latest edition of the Unreal Tournament series. Glorious Games would like to invite our fans to come over to the Glorious Games stand at E3 in 2021."다행히도 JavaScript를 사용하면 이런 실수를 아주 빠르게 수정할 수 있습니다.
const textBlockCorrected = textBlock.replace(/Glorious/g, "Epic")
console.log(textBlockCorrected)
// "We at Epic Games, are very proud to present the latest edition of the Unreal Tournament series. Epic Games would like to invite our fans to come over to the Epic Games stand at E3 in 2021."성공적으로 교체되었습니다!
코드의 동작 원리
그렇다면 위 코드에서는 구체적으로 어떤 일이 일어나고 있을까요? 순서대로 살펴보겠습니다.
- 먼저
textBlockCorrected라는 이름의 새 변수를 선언합니다. - 그다음 이 새 변수에 원본
textBlock의 값을 기반으로 한 결과를 할당합니다. - 이어서
textBlock에replace()메서드를 연결하고,/Glorious/g, "Epic"이라는 정규 표현식과 대체 문자열을 인수로 전달합니다. 바로 이 부분에서 마법 같은 일이 일어나는 것입니다.
g 플래그의 역할
g(global, 전역) 플래그 덕분에 텍스트 블록 안의 모든 "Glorious"가 "Epic"으로 교체됩니다. 만약 이 플래그를 붙이지 않으면 replace() 메서드는 문자열에서 처음 발견된 한 곳만 교체하고 나머지는 그대로 두게 됩니다. 즉, JavaScript에서 문자열 내 단어의 여러 인스턴스를 모두 교체하려면 g 플래그 사용이 필수적입니다.
더 간단한 방법: replaceAll()
ES2021부터 도입된 replaceAll() 메서드를 사용하면 정규 표현식 없이도 동일한 결과를 얻을 수 있습니다:
const textBlockCorrected = textBlock.replaceAll("Glorious", "Epic")정규 표현식에 익숙하지 않다면 replaceAll()이 더 직관적인 선택일 수 있습니다. 다만 구형 브라우저 환경을 지원해야 한다면 replace()와 g 플래그 조합을 사용하는 것이 안전합니다.