자바스크립트 replaceAll() 함수 – 문자열을 다른 문자열로 모두 교체

정의 및 사용 방법

replaceAll() 함수는
문자열의 특정 부분을 검색하여 다른 문자열로 모두 교체(replaceAll)하는 함수입니다.

특징

특정 문자열이나 정규 표현식 패턴을 사용하여 원본 문자열 내에서 대상을 검색하고,
검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
검색된 부분과 일치하는 부분이 여러 개라도 모든 일치하는 부분을 교체합니다. (이때, 정규 표현식을 사용해서 검색할 때는 반드시 g 플래그를 지정해야 합니다.)
원본 문자열은 변경되지 않습니다.

기본 예제

JavaScript

const str = "나는 노란색이 가장 좋아~ 노란색은 마음을 따뜻하게 하지.";
const replacedStr = str.replaceAll("노란색", "파란색");

console.log(replacedStr);
// "나는 파란색이 가장 좋아~ 파란색은 마음을 따뜻하게 하지."

구문

str은 찾을 대상이 되는 원본 문자열입니다.

매개변수

replaceAll() 함수의 매개변수 설명
`searchValue`	교체될 문자열을 검색하는 방법입니다. 찾을 대상이 되는 특정 문자열 또는 정규 표현식 패턴을 지정할 수 있습니다. `searchValue`가 정규 표현식 패턴이면 반드시 전역(global)을 의미하는 `g` 플래그를 지정해야 합니다. 그렇지 않으면 `TypeError`가 발생합니다.
`newValue`	교체하는 새로운 문자열을 지정하는 방식입니다. `searchValue`를 찾았을 때 교체할 새로운 문자열 또는 함수를 지정할 수 있습니다. 인수에 문자열을 지정하면 해당 문자열을 처음 발견한 위치에서 교체합니다. 인수에 함수를 지정하면 해당 함수가 교체할 문자열을 반환합니다.

반환 값

searchValue로 검색된 부분을 모두 찾아 newValue로 교체한 새로운 문자열을 반환합니다.
원본 문자열은 변경되지 않습니다.

예외

searchValue가 정규 표현식 패턴이지만 g 플래그가 지정되어 있지 않으면 TypeError가 발생합니다.

함수의 작동 방식

replaceAll() 함수는 호출된 원본 문자열을 변경하지 않습니다. 대신 새로운 문자열을 반환합니다.

`searchValue` : 교체될 문자열을 검색하는 방법

찾을 대상이 되는 특정 문자열 또는 정규 표현식 패턴을 지정할 수 있습니다.

특정 문자열로 검색할 경우

특정 문자열로 검색할 경우, 검색된 문자열과 일치하는 부분을 교체합니다.
일치하는 부분이 여러 개라도 모든 일치하는 부분을 교체합니다.

JavaScript 특정 문자열을 교체

const originalString = "안녕하세요, 자바스크립트! 자바스크립트!";
const newString = originalString.replaceAll("자바스크립트", "JavaScript");

// 검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
// 이때, 검색된 문자열에서 일치하는 부분이 여러 개라도 모두 교체합니다.
console.log(newString); // 출력: 안녕하세요, JavaScript! JavaScript!

// 원본 문자열은 변경되지 않습니다.
console.log(originalString); // 출력: "안녕하세요, 자바스크립트! 자바스크립트!"

정규 표현식 패턴으로 검색할 경우

정규 표현식 패턴도 검색된 문자열에서 일치하는 모든 부분만을 교체합니다.
이때, g 플래그를 반드시 지정해야 합니다. (그렇지 않으면 TypeError가 발생)

g 플래그의 g는 global을 의미하며, 문자열 내의 모든 일치하는 패턴을 글로벌로 검색하여 교체하겠다는 뜻입니다.

JavaScript 정규 표현식 패턴으로 검색

const text = "apple banana apple";

// g 플래그 사용
const result = text.replaceAll(/apple/g, "orange");
console.log(result);  // "orange banana orange"

// ⚠️ 주의: g 플래그 사용하지 않음
const resulNotg = text.replaceAll(/apple/, "orange");
// Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

`newValue` : 교체하는 새로운 문자열을 지정하는 방식

searchValue를 찾았을 때 교체할 새로운 문자열 또는 함수를 지정할 수 있습니다.

문자열를 지정할 경우

문자열을 지정할 경우 지정한 문자열로 교체되어 반환합니다.

JavaScript newValue 인수에 문자열을 지정할 경우 예제

const originalString = "안녕하세요, JavaScript! JavaScript!";
const newString = originalString.replaceAll("JavaScript", "자바스크립트");

console.log(newString); // 출력: "안녕하세요, 자바스크립트! 자바스크립트!"

함수를 지정할 경우

함수를 지정할 경우 이 함수는 각 일치 항목마다 호출되며 반환 값은 대체 문자열에 사용됩니다.

JavaScript newValue 인수에 함수를 지정할 경우 예제

const originalString = "안녕하세요, JavaScript! JavaScript!";
const newString = originalString.replaceAll("JavaScript", function(match) {
    // match는 replaceAll() 함수가 찾은 부분 문자열 전체
    return match.toUpperCase();
});

console.log(newString); // 출력: "안녕하세요, JAVASCRIPT! JAVASCRIPT!"

여기서 match는 replaceAll() 함수가 찾은 부분 문자열 전체를 나타내며, toUpperCase() 함수를 사용하여 문자열을 대문자로 변환하여 반환하고 있습니다.

newValue 인수에 함수를 지정할 경우 시그니처는 다음과 같습니다.

여기서 각 매개변수의 역할은 다음과 같습니다.

`match`	찾아진 전체 부분 문자열입니다.
`p1, p2, ..., pN`	정규 표현식에서 괄호로 둘러싸인 각 그룹에 해당하는 부분 문자열입니다.
`offset`	`match`가 발견된 문자열의 시작 위치(index)입니다.
`string`	원본 문자열 전체입니다.
`groups`	정규 표현식에서 명명된 그룹에 해당하는 객체입니다. (`/(a)(?<b>c)/`와 같이 명명된 그룹이 있는 경우에만 존재합니다.)

그리고, 이 함수에서는 교체할 값을 반환합니다. 이 반환된 값이 replaceAll() 함수에 의해 교체됩니다. 이러한 방식을 활용하면 매치된 부분에 대한 동적인 교체 로직을 쉽게 구현할 수 있습니다.

JavaScript 전화번호를 형식에 맞게 변경하는 예제

const phoneNumber = "123-456-7890, 234-567-8910";
const re = /(\d{3})-(\d{3})-(\d{4})/g;
// (\d{3}): 숫자 3개에 해당하는 그룹. 괄호로 둘러싸여 있어서 이 부분은 첫 번째 그룹
// (\d{3}): 두 번째 그룹으로, 다시 3개에 해당하는 그룹
// (\d{4}): 세 번째 그룹으로, 숫자 4개에 해당

const formattedNumber = phoneNumber.replaceAll(re, function(match, areaCode, prefix, lineNumber) {
    // match: 현재 찾아진 전체 부분 문자열 (예: 123-456-7890)
    // areaCode: 첫 번째 그룹에 해당하는 지역 코드 (예: 123)
    // prefix: 두 번째 그룹에 해당하는 접두어 (예: 456)
    // lineNumber: 세 번째 그룹에 해당하는 라인 번호 (예: 7890)
    
    return `+1 (${areaCode}) ${prefix}-${lineNumber}`;
});

console.log(formattedNumber);
// 출력: "+1 (123) 456-7890, +1 (234) 567-8910"

이 예제에서는 정규 표현식 (\d{3})-(\d{3})-(\d{4})를 사용하여 전화번호의 각 부분을 그룹화하고, 콜백 함수에서는 이 그룹들을 활용하여 전화번호를 다른 형식으로 변경하고 있습니다. 결과적으로 "123-456-7890, 234-567-8910"이 "+1 (123) 456-7890, +1 (234) 567-8910"처럼 교체된 형식으로 변경됩니다.

참고하세요!
정규 표현식은 강력하면서도 유연한 문자열 검색 및 변환 도구이지만, 그 표현식 자체가 다소 추상적이기 때문에 처음에는 이해하기 어려울 수 있습니다. 특히 복잡한 패턴이나 메타문자의 다양한 사용은 초보자에게는 혼란스러울 수 있습니다. 초반에는 어렵게 느껴질 수 있지만, 적절한 문서 및 학습 자료를 참고하면서 천천히 학습하시면 됩니다.

활용 예제

여러 다양한 상황에서 replaceAll() 함수를 유용하게 사용할 수 있습니다.

HTML에는 일부 문자가 HTML 코드에서 일반 문자로 사용할 수 없고, 코드로만 사용하도록 예약된 문자가 있습니다. 예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, <라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. < 기호는 이 기호의 의미로 브라우저에서 표시하게 하는 엔티티(entities)인 < 로 변환하여 사용합니다.

아래는 그 중 하나로 사용자가 입력한 문자열이 HTML 태그로 인식되지 않도록 <p>나 <strong>같은 태그 자체를 엔티티로 교체할 때 유용합니다.

JavaScript

const htmlString = "<p>Hello, <strong>world</strong>!</p>";
const escapedString = htmlString
  .replaceAll(/</g, "&lt;")
  .replaceAll(/>/g, "&gt;");

console.log(escapedString);
// 출력: "&lt;p&gt;Hello, &lt;strong&gt;world&lt;/strong&gt;!&lt;/p&gt;"

이러한 예약된 문자를 HTML 엔디티(entities)로 변환해야 하는 이유는 HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기에서 자세히 설명하고 있습니다.