JS 정규식의 \1, $1이 헷갈린다면? 역참조 개념부터 오류 해결까지 친절한 가이드

역참조는 정규 표현식 패턴 내에서 이전에 캡처된 그룹이 일치시킨 텍스트와 동일한 텍스트를 다시 일치시키고자 할 때 사용하는 기능이에요.

캡처 그룹은 괄호 $(\text{})$로 묶인 패턴을 말하며, 일치된 부분이 임시로 저장되죠. 역참조는 이 저장된 내용을 \1, \2와 같은 형태로 불러와요. 여기서 숫자는 캡처 그룹의 순서(왼쪽부터 1, 2, 3...)를 의미합니다.

// 연속된 두 개의 같은 단어를 찾는 정규식
const regex = /(\w+)\s+\1/g; 
const text = "빨리 빨리 가자, 천천히 천천히 가자.";

// \1은 첫 번째 캡처 그룹 (\w+)이 일치시킨 '빨리'나 '천천히'를 다시 참조합니다.
const matches = text.match(regex);
console.log(matches); // ["빨리 빨리", "천천히 천천히"]

가장 흔한 실수는 캡처 그룹 번호를 잘못 지정하는 거예요.

숫자 대신 이름을 사용하면 가독성이 높아지고 번호 착각 오류를 방지할 수 있습니다.

// 문법: (?<이름>패턴)
const regex = /(?<tag>\w+)\s+\k<tag>/g;
const text = "좋아 좋아, 싫어 싫어";

// \k<tag>로 'tag'라는 이름을 가진 그룹을 참조합니다.
const matches = text.match(regex);
console.log(matches); // ["좋아 좋아", "싫어 싫어"]

// 참고: named backreference는 ES2018부터 지원됩니다.

역참조 자체는 계산 비용이 많이 들 수 있으며, 특히 탐욕적(Greedy)인 양화자(∗, +)와 함께 사용될 때 최악의 백트래킹(Catastrophic Backtracking) 문제를 일으킬 수 있습니다.

가능한 한 최소 일치 양화자(∗?, +?)를 사용하거나, 문자 클래스를 명확하게 지정하여 패턴의 탐색 범위를 제한하세요.

// HTML 태그 쌍을 찾는 예시 (흔한 실수)
// 문제: .*는 너무 '탐욕적'이며 역참조를 만나 백트래킹을 많이 할 수 있습니다.
// 예: "<b>굵게</b> 그리고 <i>기울임</i>" 에서 전체를 잡아버릴 수 있음.
// const badRegex = /<(\w+)>.*<\/\1>/g; // 피해야 합니다.

// 해결책: 최소 일치 양화자 (*?)와 특정 문자가 아닌 경우를 명시
// 이 예시에서는 닫는 태그가 아닌 문자[^>]로 내부 내용을 제한하는 것이 더 명확합니다.
const goodRegex = /<(\w+)[^>]*>([\s\S]*?)<\/\1>/g; 
const text = "이것은 <B>굵은 글씨</B>입니다.";

// replace를 사용하면 더 명확하게 그룹을 참조하고 내용을 바꿀 수 있어요.
// $1: 1번 그룹(태그 이름), $2: 2번 그룹(내부 내용)
const replacedText = text.replace(goodRegex, "[[ 태그: $1, 내용: $2 ]]");
console.log(replacedText); // "이것은 [[ 태그: B, 내용: 굵은 글씨 ]]입니다."

문자열의 replace() 메서드에서 역참조를 사용할 때 발생하는 오류에 대한 질문도 많아요.

replace() 메서드의 두 번째 인수인 대체 문자열 내에서는 \n 대신 $n을 사용하여 캡처 그룹을 참조합니다.

// 이름과 성을 '성, 이름' 형식으로 바꾸는 예시
const nameRegex = /(\w+)\s+(\w+)/; // (이름)(공백)(성)을 캡처

const name = "Gildong Hong"; 

// $2: 두 번째 그룹(Hong), $1: 첫 번째 그룹(Gildong)
const replacedName = name.replace(nameRegex, "$2, $1");

console.log(replacedName); // "Hong, Gildong"

// 명명된 그룹을 사용했다면:
const namedRegex = /(?<first>\w+)\s+(?<last>\w+)/;
// 대체 문자열에서는 '$<이름>' 형식으로 참조합니다.
const replacedNamed = name.replace(namedRegex, "$<last>, $<first>"); 
console.log(replacedNamed); // "Hong, Gildong"