그룹 패턴

0. 요약

기호	의미
()	그룹화 및 캡처
(?:패턴)	그룹화(캡처X)
(?=)	앞쪽일치
(?!)	부정 앞쪽 일치
(?<=)	뒤쪽 일치
(?<!)	부정 뒤쪽 일치

---

1. () 패턴

() 패턴은 패턴들의 그룹을 만드는 역할을 한다.

1-1. 비그룹화와 그룹화

const regExp1 = /lo+/g;
const regExp2 = /(lo)+/g;

위의 두 정규식의 차이를 살펴보자.

먼저 /lo+/ 정규식은 o 문자가 하나 이상 반복되는 패턴이다. 하지만 /(lo)+/은 문자 o가 아니라 문자열 lo가 하나 이상 반복되는 패턴이다. 즉 () 패턴을 통해 lo가 하나로 그룹화된 것이다.

비그룹화와 그룹화

/lo+/ 정규식을 통해 lo, looo가 매칭된 것을 확인할 수 있다.

비그룹화와 그룹화

/(lo)+/ 정규식을 통해 lo, lolo가 매칭된 것을 확인할 수 있다.

2-1. 캡처

() 패턴은 캡처라는 것을 진행한다. 아래의 코드를 보자.

const regExp = /(lo)+/;
const str = 'lolololo';

str.match(regExp); // ['lolololo', 'lo']

정규식의 캡처로 인해 () 패턴 내의 lo 문자열이 그룹화하여 캡처된다. 이렇게 캡처된 lo문자열은 + 패턴으로 인해 1회 이상 연속으로 반복되는 문자를 검색하는데 사용되고 모두 매칭이 끝난 뒤 캡처된 lo가 검색된다.

즉, 아래와 같은 순서로 진행된다.

1. 그룹화된 lo를 + 패턴과 함께 검색하여 lolololo를 반환한다.

2. 캡처된 lo를 추가 반환한다.

2-2. 캡처 예시

또 다른 예시를 살펴보자.

const string = 'hello! 안녕하세요.';
const regExp = /(\w..)(\W+)/;

string.match(regExp); // ['llo! 안녕하세요.', 'llo', '! 안녕하세요.']

1. 정규 표현식의 () 패턴 내의 \w..와 \W+ 패턴을 순서대로 캡처

2. \w.. 패턴으로 llo가 매칭

3. \W+ 패턴으로 안녕하세요.가 매칭

4. 최종적으로 llo 안녕하세요.가 반환

5. 첫 번째 캡처한 표현식 \w..로 llo가 반환

6. 두 번째 캡처한 표현식 \W+로 안녕하세요.가 반환

---

3. (?:패턴) 패턴

(?:패턴) 패턴은 그룹을 지어서 찾지만 찾아진 문자열에 그룹 정보를 기록하지 않는다. 즉, 캡처를 하지 않는다. 해당 패턴은 정규식 그룹화 캡처 기능을 통해 추가적인 결과값을 얻기 싫을 때 사용할 수 있다.

const regExp = /(?:lo)+/;
const str = 'lolololo';

str.match(regExp); // ['lololo']

---

4. (?=) 패턴과 (?!) 패턴

(?=) 패턴은 바로 앞에 명시된 패턴을 찾는데, (?=) 패턴을 만족하는 경우만 찾는다. (?!) 패턴은 (?=) 정반대로 (?!) 패턴을 만족하지 않는 경우만 찾는다.

풀어 설명하자면 아래와 같다.

• (?=): 앞에 명시된 패턴이 (?=) 내에서 명시된 패턴 앞에 존재해야 한다.

• (?!): 앞에 명시된 패턴이 (?!) 내에서 명시된 패턴 앞에 존재하면 안된다.

4-1. (?=) 패턴 사용예시

정규 표현식은 /\w{2}(?=e)/g 이다. 이는 문자를 2개 선택할 것인데 e 문자 앞에 붙은 것만 찾는다는 의미를 가진다.

여기서 문자는 밑줄 문자를 포함한 영숫자 문자를 뜻한다.

(?=) 패턴 사용예시

때문에 kl, fl, gl이 매칭된다.

4-2. (?!) 패턴 사용예시

정규 표현식은 /\w{2}(?!e)/g 이다. 이는 위 정규 표현식과 반대로 e 문자 앞에 있는 것을 제외한 길이 2의 문자열을 찾는다는 의미를 가진다.

여기서 문자는 밑줄 문자를 포함한 영숫자 문자를 뜻한다.

(?=) 패턴 사용예시

때문에 e 문자가 바로 뒤에 있는 길이 2의 문자열을 제외한 wn, le, wf le, go, ge, do, lo, hu가 매칭된다.

---

5. (?<=) 패턴과 (?<!) 패턴

(?<=) 패턴은 (?=) 과 위치가 서로 바뀌었다고 생각하면 되고 (?<!) 패턴은 (?!) 패턴과 위치가 바뀌었다고 생각하면 된다.

즉, 찾고자 하는 패턴의 앞쪽에 사용하여 (?<=) 또는 (?<!) 패턴 내에서 명시된 패턴을 만족하냐 만족하지 않느냐에 따라 결과를 반환한다.

풀어 설명하자면 아래와 같다.

• (?<=): 뒤에 명시된 패턴이 (?<=) 내에서 명시된 패턴 뒤에 존재해야 한다.

• (?<!): 뒤에 명시된 패턴이 (?<!) 내에서 명시된 패턴 뒤에 존재하면 안된다.

5-1. (?<=) 패턴 사용예시

(?<!) 패턴의 사용예시만 살펴보고 넘어가자.

정규 표현식은 /(?<=f)\w+/g이다. 이는 앞에 f 문자가 있어야하고 뒤에는 밑줄 문자를 포함한 영숫자 문자가 1개 이상 반복되는 패턴을 찾는다는 의미를 가진다.

(?<=) 패턴 사용예시

이를 만족하는 것은 f 바로 뒤 fle 뿐이다.

---

6. Conclusion

기초적인 정규식에 대해 정리를 끝냈다. 이벙네 정리한 그룹 패턴은 처음 보는 것들이 많아 생소한 느낌을 많이 받았다. 여러 예제를 살펴보며 익숙해 지도록 노력하자. 그 다음 과정은 자바스크립트에서 정규식을 사용하여 메서드에 대한 정리이다. 이번주 내에 정리하도록 하자. 파이팅!

---

참고

[JS] 📚 정규표현식(RegExp) - 이해하기 쉽게 정리 + 응용 예제 정규표현식(Regular Expression, regex)

---

📅 2023-01-25