[RegExp] $1

카멜 케이스로된 변수 이름을 스네이크 케이스로 변환시켜주는 라이브러리의 동작 방식이 궁금했습니다.

node_modules에서 코드를 살펴보니 처음 보는 정규식을 발견했습니다.

 

/([\p{Lowercase_Letter}\d)([/p{Uppercase_Letter}])/gu

 

\p는 문자가 유니코드에 속하는지는 검사합니다. 이를 사용하기 위해서 u 플래그를 써야 하죠.

그래서 g 플래그 뒤에 u를 추가해야 합니다.

여기에서 두 가지 캡처 그룹이 있는데요. 캡처 그룹은 ()를 사용해서 구분합니다.

여러가지 토큰을 그룹화해야할 때 캡처를 사용하죠.

 

위의 정규 표현식을 풀어보겠습니다.

1. ([\p{Lowercase_Letter}\d)

- 유니코드에 속하는 소문자 혹은 숫자가 첫 번째 캡처 그룹\

 

2. ([/p{Uppercase_Letter}])

- 유니코드에 속하는 대문자가 두 번째 캡처 그룹입니다.

 

이들은 정규표현식에서 각각 $1, $2로 표현됩니다.

카멜 케이스를 스네이크 케이스로 변환할 때 사용할 겁니다.

$1, $2..를 쉽게 이해할 수 있는 예시 하나를 보겠습니다.

var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
str.replace(re, '$2, $1'); // "Smith, John"

이 원리를 이용해 javaScript를 java_script로 쉽게 바꿀 수 있습니다.

 

앞서 나왔던 /([\p{Lowercase_Letter}\d)([/p{Uppercase_Letter}])/gu 정규식을 이용하면

javaScript가 탐지가 될 겁니다. java가 첫 번째 캡처 그룹이고 Script가 두 번째 캡처 그룹입니다.

그리고 그 사이에 '_'를 넣은 다음에 문자열 전체를 소문자로 변경하면 됩니다.

const decamelize = (text, separator='_')=> {
	const replacement = `$1${separator}$2`;
    return text.replace(/([\p{Lowercase_Letter}\d])(\p{Uppercase_Letter})/gu, replacement)
    .toLowerCase();
}

두 캡처 그룹 사이에 separator를 넣는 템플릿 리터럴을 만드는 것으로 문제가 쉽게 해결됩니다.