[JS] 정규식의 그룹화(Grouping) / 캡처화(Capturing) 활용하기

그룹화 / 캡처화

---

그룹화 Grouping

정규식에서 그룹화는 특정 문자들을 단일 표현식(Single Entity)으로 구분하기 위해 사용한다. 그룹화는 보통 캡처링과 함께 사용하므로 이 둘을 함께 알아두는 것이 좋다.

 

아래 예시에서 사용한 + 수량자는 1번 이상 반복하는 문자열을 찾는다. 따라서 ab(b 1번 일치), abb(b 2번 일치) 등을 모두 일치한다고 판단한다.

const str = 'aabbbababaabb';
str.match(/ab+/g); // ['abbb', 'ab', 'ab', 'abb']

 

특정 문자 그룹의 반복 여부를 판단하려면 소괄호()를 사용해 그룹화하면 된다. 그룹화하면 괄호 안 문자를 하나의 단일 표현식으로 정의한다. 아래 예시에선 (ab)로 묶었으므로 ab가 1번 이상 반복되는 문자를 찾는다.

const str = 'aabbbababaabb';
str.match(/(ab)+/g); // ['ab', 'abab', 'ab']

 

캡처화 Capturing

💡 임시 변수(\1, \2 등)를 정규식 내에서 다시 호출하는 것을 역참조(Back Reference)라고 부른다.

 

캡처화는 괄호로 묶은 단일 표현식을 \1, \2 같은 임시 변수에 저장한 후 참조할 수 있는 것을 말한다. 변수는 밖 → 안, 좌 → 우 순서로 저장한다(정규식 실행 순서). 아래 예시에서 \1 변수엔 a, \2 변수엔 b를 저장했으므로 abab와 일치하는 문자열을 찾는다.

const str = 'aabbbababaabb';
str.match(/(a)(b)\1\2/); // ['abab', 'a', 'b', index: 5, input: 'aabbbababaabb', groups: undefined]

 

str.match 메서드에 캡처 그룹이 있으면, 전체 정규식 실행 결과값과 캡처 그룹 결과값을 함께 포함한다.

1. (인덱스 0) str.match 결과값 : 'abab'
2. (인덱스 1) 1번 캡처 그룹 \1 결과값 : 'a'
3. (인덱스 2) 2번 캡처 그룹 \2 결과값 : 'b'

 

아래 예시에선 \1 변수에 그룹화한 문자 ab를 저장했다. (ab)\1 → (ab)(ab) 이므로 abab를 찾는다.

const str = 'aabbbababaabb';
str.match(/(ab)\1/); // ['abab', 'ab', index: 5, input: 'aabbbababaabb', groups: undefined]

 

소괄호를 사용해 그룹화하면 그룹화됨과 동시에 캡처화가 이뤄진다. 그룹화만 필요하고 캡처화가 필요 없다면 괄호 안쪽 시작 지점에 ?: 를 추가해서 캡처화를 방지할 수 있다.

const str = 'aabbbababaabb';
str.match(/(?:ab)+/g); // ['ab', 'abab', 'ab']

 

응용하기

---

💡 프로그래머스 옹알이(2) 문제 해결 방식과 유사

 

문자열에 특정 단어를 포함했는지 확인할 때 그룹화 / 캡처화를 활용할 수 있다. 예를들어 one 혹은 two 문자를 * 로 변경하고 싶을 때 아래처럼 작성할 수 있다.

const str = 'abconedeftwoghy';
str.replaceAll(/(one|two)/g, '*'); // 'abc*def*ghy'

 

oneoneone 처럼 2번 이상 중복된 단어를 찾을 때 캡처 그룹을 활용할 수도 있다. 아래 예시에서 one 문자는 \1 변수에 저장하므로 (one)\1+ → (one)(one)+ 와 동일하다고 볼 수 있다. 즉, 앞에 one 이 하나 있고, 그 뒤에 1개 이상의 one이 있으면 일치한다고 판단한다.

'abconeoneonedefghy'.replaceAll(/(one)\1+/g, '1'); // 'abc1defghy'
'abconeonedefghy'.replaceAll(/(one)\1+/g, '1'); // 'abc1defghy'
'abconedefghy'.replaceAll(/(one)\1+/g, '1'); // 'abconedefghy' (일치하는 문자 없음)

 

참고로 {n, } 수량자를 사용해도 결과는 동일하다. n 뒤에 쉼표가 없는 {n} 수량자와는 다르므로 주의하자.

'abconeoneonedefghy'.replaceAll(/(one){2,}/g, '1'); // 'abc1defghy'
'abconeonedefghy'.replaceAll(/(one){2,}/g, '1'); // 'abc1defghy'
'abconedefghy'.replaceAll(/(one){2,}/g, '1'); // 'abconedefghy' (일치하는 문자 없음)

• {n, } : n번 이상 일치
• {n} : 정확히 n번 일치

 

팁 - 탐욕적인 정규식

---

정규식은 기본적으로 탐욕적(Greedy)이다. 때문에 매칭한 문자 중 더 많고 긴 값을 반환한다. 아래 코드에선 ? 옵셔널 플래그를 사용하여 ab, abc 모두 일치하는 문자를 찾는다. 하지만 정규식은 탐욕적이므로 더 긴 값인 abc를 반환하고 있다.

const str = 'abc';
str.match(/abc?/); // ['abc', index: 0, input: 'abc', groups: undefined]

 

반면 수량자 뒤에 ?를 붙이면 탐욕적이지 않게(Lazy) 작동하여 더 짧고 적은 값을 반환한다.

const str = 'abc';
str.match(/abc??/); // ['ab', index: 0, input: 'abc', groups: undefined]

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요