JavaScript 정규식에서 replace 메서드의 콜백

replace 메서드는 두 번째 매개변수로 문자열뿐만 아니라 콜백 함수도 받을 수 있습니다. 이 함수는 발견된 각 일치 항목에 적용됩니다. 정규식이 찾은 각 부분 문자열은 그 부분 문자열에 대해 이 함수가 반환하는 값으로 대체됩니다.

이 함수에는 매개변수를 전달할 수 있습니다: 첫 번째 매개변수에는 발견된 문자열이, 두 번째 매개변수에는 첫 번째 캡처 그룹(괄호)이, 세 번째 매개변수에는 두 번째 캡처 그룹이 들어갑니다. 이런 식으로 정규 표현식에 있는 캡처 그룹의 수만큼 매개변수를 만들 수 있습니다.

마지막에서 두 번째 매개변수에는 발견된 일치 항목의 위치가, 마지막 매개변수에는 검색이 수행되는 전체 문자열이 들어갑니다.

이 모든 것이 어떻게 작동하는지 실제 예제를 통해 살펴보겠습니다.

예제

숫자가 있는 문자열이 주어졌다고 가정해 봅시다:

let str = '2 3 4 5';

이 숫자들을 제곱으로 바꿔봅시다. 먼저 콜백 함수에서 숫자를 하나씩 콘솔에 출력해 보겠습니다:

str.replace(/\d+/g, function(match) {
	console.log(match);
});

이 코드는 먼저 '2'를, 그다음 '3', '4', 그리고 '5'를 출력할 것입니다. 즉, match 변수에는 정규식이 찾은 문자열이 순차적으로 들어갑니다.

이제 문제를 완전히 해결해 봅시다 - match를 제곱하고 return으로 반환하겠습니다. 그러면 발견된 2에 대해 4가 반환되고 2는 이 4로 대체되며, 발견된 3에 대해 9가 반환되고 3은 이 9로 대체됩니다 - 이런 식으로 진행됩니다:

let result = str.replace(/\d+/g, function (match) {
	return match**2; 
});

console.log(result); // '4 9 16 25'를 출력합니다

예제

이제 문자열에 '2+3=' 형식의 구조가 주어졌다고 가정해 봅시다:

let str = '2+3= 4+5= 6+7=';

등호 뒤에 해당 숫자들의 합이 들어가도록 만들어 봅시다. 즉, 우리의 문자열은 다음과 같이 변해야 합니다:

'2+3=5 4+5=9 6+7=13'

문제를 해결하기 위해 다시 실험해 보겠습니다 - 첫 번째와 두 번째 피연산자를 별도의 캡처 그룹으로 분리하겠습니다:

str.replace(/(\d+)\+(\d+)=/g, function (match0, match1, match2) {
	console.log(match0, match1, match2);
});

이제 문제를 최종적으로 해결해 보겠습니다: 각 발견된 부분 문자열에 대해 첫 번째와 두 번째 캡처 그룹을 합산하고, 영번째 캡처 그룹(발견된 문자열, 예: '2+3=')을 가져와 그 결과를 더하고 return을 통해 모든 것을 반환합니다:

let result = str.replace(/(\d+)\+(\d+)=/g, function(match0, match1, match2) {
	let sum = Number(match1) + Number(match2);
	return match0 + sum;
});

console.log(result);

실습 문제

문자열이 주어졌습니다:

let str = 'aaa [2] bbb [3] ccc [12] ddd';

괄호 안에 있는 숫자를 찾아 두 배로 늘리세요. 즉, 우리의 문자열은 다음과 같이 되어야 합니다:

'aaa [4] bbb [6] ccc [24] ddd'

문자열이 주어졌습니다:

let str = '123 456 789';

모든 숫자를 찾아 숫자 순서를 역순으로 바꾸세요. 즉, 우리의 문자열은 다음과 같이 되어야 합니다:

'321 654 987'

날짜가 있는 문자열이 주어졌습니다:

let str = '31.12.2025 30.11.2024 29.10.2023';

모든 날짜를 찾아 다른 형식으로 변환하여 다음 문자열을 얻으세요:

'2025-12-31 2024-11-30 2023-10-29'