String.prototype.replace()
사용법
replace()
함수는
문자열의 특정 부분을 검색하여 다른 문자열로 대체(replace)하는 함수입니다.
- 특정 문자열이나 정규 표현식 패턴을 사용하여 원본 문자열 내에서 대상을 검색하고,
- 검색된 부분은 원하는 문자열로 대체되어 반환됩니다.
- 원본 문자열은 변경되지 않습니다.
const originalString = "안녕하세요, 자바스크립트!";
const newString = originalString.replace("자바스크립트", "JavaScript");
// 검색된 부분은 원하는 문자열로 대체되어 반환됩니다.
console.log(newString); // 출력: 안녕하세요, JavaScript!
// 원본 문자열은 변경되지 않습니다.
console.log(originalString); // 출력: "안녕하세요, 자바스크립트!"
const originalString = "제 나이는 20살입니다.";
const newString = originalString.replace(/\d+/, "**");
// \d+는 하나 이상의 숫자를 나타내는 정규 표현식
// 검색된 부분은 원하는 문자열로 대체되어 반환됩니다.
console.log(newString); // 출력: 제 나이는 **살입니다.
// 원본 문자열은 변경되지 않습니다.
console.log(originalString); // 출력: "제 나이는 20살입니다."
replace()
함수의 형식은 다음과 같습니다.
구문
str.replace(searchValue, newValue);
str
: 대상이 되는 원본 문자열입니다.
매개변수
searchValue |
찾을 대상이 되는 문자열 또는 정규 표현식 패턴입니다. |
---|---|
newValue |
searchValue 를 찾았을 때 대체할 새로운 문자열이나 함수입니다.
|
반환 값
searchValue
를 찾아 newValue
로 대체한 새로운 문자열을 반환합니다.
원본 문자열은 변경되지 않습니다.
newValue
인수에 함수를 지정할 경우
newValue
인수에 함수를 지정할 경우 예제
const originalString = "안녕하세요, JavaScript!";
const newString = originalString.replace("JavaScript", function(match) {
// match는 replace() 함수가 찾은 부분 문자열 전체
return matched.toUpperCase();
});
console.log(newString); // 출력: "안녕하세요, JAVASCRIPT!"
여기서 match
는 replace()
함수가 찾은 부분 문자열 전체를 나타내며, 이를 toUpperCase()
메서드를 사용하여 문자열을 대문자로 변환하여 반환하고 있습니다.
newValue
인수에 함수를 지정할 경우 시그니처는 다음과 같습니다.
function replacer(match, p1, p2, /* …, */ pN, offset, string, groups) {
return replacement;
}
여기서 각 매개변수의 역할은 다음과 같습니다.
match |
찾아진 전체 부분 문자열입니다. |
---|---|
p1, p2, ..., pN |
정규 표현식에서 괄호로 둘러싸인 각 그룹에 해당하는 부분 문자열입니다. |
offset |
match 가 발견된 문자열의 시작 위치(index)입니다. |
string |
원본 문자열 전체입니다. |
groups |
정규 표현식에서 명명된 그룹에 해당하는 객체입니다. (/(a)(?<b>c)/ 와 같이 명명된 그룹이 있는 경우에만 존재합니다.) |
그리고, 이 함수에서는 대체할 값을 반환합니다. 이 반환된 값이 replace()
함수에 의해 대체됩니다. 이러한 방식을 활용하면 매치된 부분에 대한 동적인 대체 로직을 쉽게 구현할 수 있습니다.
이와 관련된 예제가 있습니다. '전화번호를 형식에 맞게 변경하는 예제'라는 다음의 예제를 통해서 각 매개변수의 역할을 확인해 보시기 바랍니다.
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()
함수를 유용하게 사용할 수 있습니다. 아래는 몇 가지 예제입니다.
이메일 주소의 일부를 가려보기
const email = "john.doe@example.com";
const hiddenEmail = email.replace(/(?<=.{3})[^@](?=[^@]*@)/g, "*");
console.log(hiddenEmail);
// 출력: "joh*************@example.com"
이 예제에서는 이메일 주소의 첫 세 글자를 제외한 모든 문자를 *
로 대체하여 가렸습니다.
이때 정규 표현식의 (?<=.{3})
는 세 글자 이전의 위치를 나타내고, (?=[^@]*@)
는 이후에 @
문자가 나오기 전의 위치를 나타냅니다.
HTML 태그 제거하기
const htmlString = "<p>Hello, <strong>world</strong>!</p>";
const plainText = htmlString.replace(/<[^>]*>/g, "");
console.log(plainText);
// 출력: "Hello, world!"
이 예제에서는 HTML 문자열에서 태그를 제거하여 순수한 텍스트만을 남겼습니다. 정규 표현식 <[^>]*>
는 <
로 시작하고 >
로 끝나는 패턴을 찾아서 모두 제거합니다.
단어 대체하기
const sentence = "JavaScript is fun!";
const replacedSentence = sentence.replace("JavaScript", "TypeScript");
console.log(replacedSentence);
// 출력: "TypeScript is fun!"
이 예제에서는 간단한 문자열 대체를 수행합니다. replace()
함수를 사용하여 "JavaScript"를 "TypeScript"로 대체하였습니다. 결과적으로 "TypeScript is fun!"이라는 새로운 문장이 출력됩니다. 이렇게 간단한 형태의 대체는 일상적인 문자열 조작에서 많이 활용될 수 있습니다.
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
replace()
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
replace()
|
ECMAScript Language Specification #sec-string.prototype.replace |