[정규표현식] capturing group (feat. javascript, visual studio code, notepad++)

정규표현식은 문자열을 패턴화한 것으로, 문자열 검색/치환/검사에 사용된다. 아직 정규표현식에 대해 감이 안 잡힌다면 아래 글을 보고 오자!

[정규표현식] 정규표현식(Regular expression) width javascript

 

[정규표현식] javascript에서 정규표현식 사용하기

 

🎈Capturing group(캡처링 그룹)

정규표현식 내에는 캡처링 그룹이라는 개념이 존재한다. 캡처링 그룹은 괄호('()')로 둘러싸인 영역을 의미한다.

이 영역은 test 함수에서는 별 의미가 없으나, RegExp의 exec 함수와 String의 match, replace 함수에서는 쓰고 안쓰고에 큰 차이가 있다.

 

 

🎈 역할

캡처링 그룹은 두가지 그룹핑과 캡처링 두가지 역할을 한다.

그룹핑한다는 것은 말 그대로 문자열 패턴을 묶는 다는 것으로 , 수량자(x*, x+, x?, x{n}, x{n,}, x{x,m})를 붙일 때 이용된다.

캡쳐링한다는 것은 패턴에 표현된 그룹에 위치하는 실제 문자열을 따낸다는 의미이다.

 

 

🎈 종류

종류	양식
capturing group	(그룹으로 묶일 패턴)	캡처링 그룹으로 묶는다. - exec, match의 결과값인 배열의 인덱스 1 이상의 요소에 캡처된 결과 값이 출력된다.
named capturing group	(?<그룹명>그룹으로 묶일 패턴)	이름을 부여한 캡처링 그룹으로 묶는다. - exec, match의 결과값인 배열의 value 속성에 object 객체에 [캡처링 그룹 명 : 캡처링된 값]과 같은 쌍으로 표현된다.
non-capturing group	(?:그룹으로 묶일 패턴)	그룹핑만 하고 캡처링은 하지 않는다. - exec, match의 결과값인 배열의 value 속성에 해당 그룹은 나타나지 않는다.

'apple, pineapple, kimkimkim'.match(/(?<fruitName>apple)(,\s).+?apple,\s(?:kim){3}/);

 

위 정규표현식을 해독하자면, 아래와 같다

 

(?<fruitName>apple) : fruitName이라는 이름으로 명명된 캡처링 그룹. "apple" 문자열 검색

(,\s) : 캡처링 그룹. ","+공백 검색

.+? : <문자 or 숫자 or 공백 한 글자>가 1회 이상 반복되는 문자열이 있을 수도 없을 수도 있다

apple,\s : "apple,"+공백 검색

(?:kim){3} : 논캡처링 그룹. "kim"이라는 문자열을 3회 반복

 

해서 결과값은 다음과 같다.

배열의 첫번째 요소는 일치하는 문자열이, 두번째 요소는 캡처링된 값 "apple", 세번째 요소는 캡처링된 값 ","

그리고 속성으로 groups에 명명된 캡처링 그룹의 이름 fruitName을 키로, 캡처링된 값 'apple'이 값으로 들어간다.

검색 결과 0번째 인덱스에서 일치된 문자열을 발견하였으므로 index 속성에는 0이, input 속성에는 입력값이 들어간다.

 

🎈 활용 1)  캡처링한 문자열 참조

위에서 사용한 정규표현식 "/(?<fruitName>apple)(,\s).+?apple,\s(?:kim){3}/"은 "apple"이라는 문자열과 ",\s" 값이 반복하여 사용된다. 이 반복을 줄이기 위해 캡처링한 문자열을 다음과 같이 참조할 수 있다.

 

/(?<fruitName>apple)(,\s).+?apple,\s(?:kim){3}/

/(?<fruitName>apple)(,\s).+?\1\2(?:kim){3}/

 

반복이 줄어들었고 동일하게 동작한다.

 

🎈 활용 2)  replace에서 $n으로 접근

 - 명명된 캡처링 그룹의 경우, $<name>으로 접근

 - 이름 없는 캡처링 그룹의 경우, $n 으로 접근 (n은 캡처링된 순번)

//이름 없는 캡처링 그룹(Capturing group)
'my name is hahaha and i am 31 years old'.replace(/(my name is )hahaha( and i am )31( years old)/,"$1noh$236$3");
//결과 값 => 'my name is noh and i am 36 years old'


//명명된 캡처링 그룹(Named capturing group)
'my name is hahaha and i am 31 years old'.replace(/(?<intro>my name is )hahaha(?<mid> and i am )31(?<tail> years old)/,"$<intro>noh$<mid>36$<tail>");
//결과 값 => 'my name is noh and i am 36 years old'

 

 

💡  Visual studio code '파일에서 바꾸기' 에서 활용

① Visual Studio code에서 Ctrl + Shift + H 키를 눌러 '파일에서 바꾸기' 창을 연다.

② Use Regular Expression 아이콘을 클릭한다. (또는 Alt + R)

③ 검색할 문자열 패턴을 입력한다.

④ 바꿔치기 할 문자열 패턴을 입력한다.

   - 캡처된 문자열은 ($n)과 같은 형태로 이용할 수 있다.

 

💡  Notepad++ 'Replace' 에서 활용

① Notepad++에서 Ctrl + H 키를 눌러 'Replace' 창을 연다.

② 검색 모드에서 '정규 표현식'을 선택한다.

③ 검색할 문자열 패턴을 입력한다.

④ 바꿔치기 할 문자열 패턴을 입력한다.

   - 캡처된 문자열은 $n과 같은 형태로 이용할 수 있다.

 

 

📚참고문헌

Regular expressions - JavaScript | MDN

blog.rhostem.com