[JavaScript] 자바스크립트에서 replaceAll 함수 대체하기 (Feat.정규식)

JS에서 문자열의 값을 대체하는 방법은 replace를 사용하는 것이다. 그러나 replace는 처음 발견한 문자에 대해서만 적용된다. 예를 들면 아래와 같다.

let str = "Hello World!";
str = str.replace("l", "r");
console.log(str); // Herlo World! (첫 번째 l만 r로 대체된다!)

이를 해결하기 위해 replaceAll 함수가 있다면 정말 좋겠지만, JS에는 존재하지 않는다. 따라서 직접 유사하게 만들어야 하는데 정규식을 사용하여 문자열 전체에 대해 대체 작업을 수행하도록 하면 된다.

let str = "Hello World!";
str = str.replace(/l/g, "r");
console.log(str); // Herro World!

/l/g는 l이라는 패턴을 g(global), 즉 전제 문자열에 대해 탐색하여 일치하는 패턴을 반환하겠다는 뜻이다. 따라서 전체 문자열 중에 l인 것을 찾아서 r로 대체하게 된다. 그렇다면 대소문자가 섞여있다면 어떨까?

let str = "HeLlo World!";
str = str.replace(/l/g, "r");
console.log(str); // HeLro Worrd!

대소문자가 구분되어 소문자 l만 r로 바뀌게 된다.

 

대소문자 구분 없이 replaceAll 하고 싶다면?

---

대소문자 구분을 없애기 위해서는 i를 추가해주면 된다.

let str = "HeLlo World!";
str = str.replace(/l/gi, "r");
console.log(str); // Herro World!

 

특정 변수에 저장된 값을 찾아서 바꾸기

---

만약에 특정 문자열이 아닌 변수에 저장된 값을 바꾸고 싶다면 어떻게 해야할까? 예를 들어, test라는 변수에 문자열을 저장해놓고 아래와 같이 수행한다고 하자.

let str = "Hello World!";
let test = "l";
str = str.replace(/test/g, "r");
console.log(str); // Hello World!

test를 찾아서 r로 변환하고 싶지만, 우리가 원하는 결과가 도출되지 않는다. 위의 정규식은 전체 문자열 중 "test"라는 문자열을 찾아서 r로 대체한다. 따라서 변수에 저장된 값을 찾아 바꾸고 싶다면 위와 같은 방법이 아닌 RegExp 객체를 사용해야 한다.

let str = "Hello World!";
let test = "l";

let regExp = new RegExp(test, "g"); // RegExp 객체를 만들어서 전체 문자열 중 test에 저장된 값을 찾는다.

str = str.replace(regExp, "r");
console.log(str); // Herro World!

이렇게 replaceAll을 대체하는 법을 알아보았다.