자바스크립트 replace 메서드 정규식 특수 대체 패턴

정규표현식 특수 대체 패턴 (Special Replacement Patterns) 이란?

• String.prototype.replace() 에서 사용 가능한 특수한 대체 패턴이다.

패턴 살펴보기

• $&: 매칭된 문자를 삽입하고 싶을 때 사용하는 패턴이다.
• $`: 매칭된 문자의 앞 부분을 삽입하고 싶을 때 사용하는 패턴이다.
• $': 매칭된 문자의 뒷 부분을 삽입하고 싶을 때 사용하는 패턴이다.
• $n: n 번째 캡쳐링 그룹을 삽입하고 싶을 때 사용하는 패턴이다.
• $$: $ 자체를 삽입하고 싶을 때 사용하는 패턴이다.

활용 예제 살펴보기

• 아래에 나오는 [ㄱ-힣] 은 한글 유니코드를 전부 매치시킬 수 있는 정규표현식이다.

$&

"hello. 안녕 world. 세상".replace(/[ㄱ-힣]+/g, "($&)");
// 출력 결과: 'hello. (안녕) world. (세상)'

• 정규표현식에 매칭된 한글에 괄호가 씌워졌다.

$`

"hello. 안녕 world. 세상".replace(/[ㄱ-힣]+/g, "($`)");
// 출력 결과: 'hello. (hello. ) world. (hello. 안녕 world. )'

• 정규표현식에 매칭된 한글 앞에 있던 글자에 괄호가 씌워져 나타났다.

$'

"hello. 안녕 world. 세상".replace(/[ㄱ-힣]+/g, "($')");
// 출력 결과: 'hello. ( world. 세상) world. ()'

• 정규표현식에 매칭된 한글 앞에 있던 글자에 괄호가 씌워져 나타났다.

$n

"hello. 안녕 world. 세상".replace(/(안녕)|(세상)|([a-z\ \.]+)/g, "$1$2");
// 출력 결과: '안녕세상'

• 그룹 3번의 내용을 삽입하지 않고, 캡쳐링 그룹1 과 캡쳐링 그룹2 만 표기했기 때문에 안녕세상 만 출력되었다.

"hello. 안녕 world. 세상".replace(
  /(안녕)|(세상)|([a-z\ \.]+)/g,
  "$1$2$1$2$1$2"
);
// 출력 결과: '안녕안녕안녕세상세상세상'

• 캡쳐링 그룹1 과 캡쳐링 그룹2 를 반복해서 출력하도록 했다.
• 자세히 보면 $1 과 $2 의 순서가 섞여있다.
  • 순서가 섞여있어도 해당 그룹을 캡쳐한 장소를 기반으로 문자를 나타내기 때문에 출력 결과 문자에는 순서가 뒤집혀있지 않다.