자바스크립트 replace() 함수 – 개념 정리 및 사용 예제

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

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

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

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살입니다."

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

구문

str: 대상이 되는 원본 문자열입니다.

매개변수

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

반환 값

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

`newValue` 인수에 함수를 지정할 경우

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

const originalString = "안녕하세요, JavaScript!";
const newString = originalString.replace("JavaScript", function(match) {
    // match는 replace() 함수가 찾은 부분 문자열 전체
    return matched.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()` 함수의 사용 예제

여러 다양한 상황에서 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!"이라는 새로운 문장이 출력됩니다. 이렇게 간단한 형태의 대체는 일상적인 문자열 조작에서 많이 활용될 수 있습니다.