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

`String.prototype.replace()` 사용법

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

특정 문자열이나 정규 표현식 패턴을 사용하여 원본 문자열 내에서 대상을 검색하고,
검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
원본 문자열은 변경되지 않습니다.

JavaScript

const str = "나는 노란색이 가장 좋아~";
const replacedStr = str.replace("노란색", "파란색");

console.log(replacedStr); // "나는 파란색이 가장 좋아~"

replace() 함수의 형식은 다음과 같습니다.

구문

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

매개변수

replace() 함수의 매개변수 설명
`searchValue`	교체될 문자열을 검색하는 방법입니다. 찾을 대상이 되는 특정 문자열 또는 정규 표현식 패턴을 지정할 수 있습니다.
`newValue`	교체하는 새로운 문자열을 지정하는 방식입니다. `searchValue`를 찾았을 때 교체할 새로운 문자열 또는 함수를 지정할 수 있습니다. 인수에 문자열을 지정하면 해당 문자열을 처음 발견한 위치에서 교체합니다. 인수에 함수를 지정하면 해당 함수가 교체할 문자열을 반환합니다.

반환 값

searchValue를 찾아 newValue로 교체한 새로운 문자열을 반환합니다.
원본 문자열은 변경되지 않습니다.

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

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

특정 문자열로 검색할 경우

특정 문자열로 검색할 경우, 검색된 문자열에서 첫 번째로 일치하는 부분만을 교체합니다.

JavaScript 특정 문자열을 교체

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

// 검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
// 이때, 검색된 문자열에서 첫 번째로 일치하는 부분만을 교체합니다.
console.log(newString); // 출력: 안녕하세요, JavaScript! 자바스크립트!

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

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

JavaScript 정규 표현식 패턴을 사용한 교체

const originalString = "제 나이는 20살입니다.";
const newString = originalString.replace(/\d+/, "**");
// \d+는 하나 이상의 숫자를 나타내는 정규 표현식

// 검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
console.log(newString); // 출력: 제 나이는 **살입니다.

// 원본 문자열은 변경되지 않습니다.
console.log(originalString); // 출력: "제 나이는 20살입니다."

정규 표현식 패턴도 검색된 문자열에서 첫 번째로 일치하는 부분만을 교체합니다.
하지만, g 플래그가 있는 정규 표현식 패턴을 사용하면 모든 일치하는 부분을 교체할 수 있습니다.

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

JavaScript

const text = "apple banana apple";

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

// g 플래그 사용하지 않음
const resulNotg = text.replace(/apple/, "orange");
console.log(resulNotg);  // "orange banana apple"

g 플래그 사용한 위 코드에서는 정규 표현식 /apple/g를 사용하여 g 플래그를 설정했기 때문에, 문자열 내의 모든 "apple"을 "orange"로 바꿉니다.

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

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

문자열를 지정할 경우

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

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

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

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

함수를 지정할 경우

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

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

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

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

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

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

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

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

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

이와 관련된 예제가 있습니다. '전화번호를 형식에 맞게 변경하는 예제'라는 다음의 예제를 통해서 각 매개변수의 역할을 확인해 보시기 바랍니다.

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

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

const formattedNumber = phoneNumber.replace(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"

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

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

활용 예제

여러 다양한 상황에서 replace() 함수를 유용하게 사용할 수 있습니다. 아래는 몇 가지 예제입니다.

이메일 주소의 일부를 가려보기

JavaScript

const email = "john.doe@example.com";
const hiddenEmail = email.replace(/(?<=.{3})[^@](?=[^@]*@)/g, "*");

console.log(hiddenEmail);
// 출력: "joh*************@example.com"

이 예제에서는 이메일 주소의 첫 세 글자를 제외한 모든 문자를 *로 교체하여 가렸습니다.
이때 정규 표현식의 (?<=.{3})는 세 글자 이전의 위치를 나타내고, (?=[^@]*@)는 이후에 @ 문자가 나오기 전의 위치를 나타냅니다.

HTML 태그 제거하기

JavaScript

const htmlString = "<p>Hello, <strong>world</strong>!</p>";
const plainText = htmlString.replace(/<[^>]*>/g, "");

console.log(plainText);
// 출력: "Hello, world!"

이 예제에서는 HTML 문자열에서 태그를 제거하여 순수한 텍스트만을 남겼습니다. 정규 표현식 <[^>]*>는 <로 시작하고 >로 끝나는 패턴을 찾아서 모두 제거합니다.

단어 교체하기

JavaScript

const sentence = "JavaScript is fun!";
const replacedSentence = sentence.replace("JavaScript", "TypeScript");

console.log(replacedSentence);
// 출력: "TypeScript is fun!"

이 예제에서는 간단한 문자열 교체를 수행합니다. replace() 함수를 사용하여 "JavaScript"를 "TypeScript"로 교체하였습니다. 결과적으로 "TypeScript is fun!"이라는 새로운 문장이 출력됩니다. 이렇게 간단한 형태의 교체는 일상적인 문자열 조작에서 많이 활용될 수 있습니다.