오늘의 학습 정리는 과제를 수행하면서 유용하게 사용한 정규 표현식 팁에 대해 정리한 것입니다. 또한, 지금까지 어려워서 피했던 정규 표현식 캡처링 기능에 대해서도 공부해 보았습니다. 정규표현식의 기본적인 기호 설명은 아래 블로그에 정말 잘 설명되어 있으니 참고해주세요.
자바스크립트에서는 split 구분자에 정규표현식을 사용할 수 있습니다.
split() 메서드는 지정한 구분자를 기준으로 문자열을 나눕니다.
const str = 'apple, banana, orange';
const splitArr = str.split(', ');
console.log(splitArr);
// [ 'apple', 'banana', 'orange' ]
위와 같이 구분자가 명확할 경우는 문자열만 사용해도 충분합니다. 하지만 나눠야 하는 문자열이 ‘apple9banana8orange' 라면 어떻게 해야할까요?
이럴 때 바로 정규표현식을 구분자로 사용해야 합니다.
const str = 'apple9banana8orange';
const splitArr = str.split(/\\d/);
console.log(splitArr);
// [ 'apple', 'banana', 'orange' ]
split의 구분자로 사용한 \\d는 숫자를 매칭하라는 뜻으로 [0-9]와 동일한 매칭 패턴입니다. 구분자로 정규표현식을 사용하면 복잡한 문자열도 분리할 수 있습니다.
그런데 만약 구분자도 split된 배열에 포함하고 싶다면 어떻게 해야할까요? 이럴 땐 정규표현식 그룹화와 캡쳐 기능을 사용할 수 있습니다.
<aside> 💡 그룹화와 캡쳐 기능에 대한 자세한 설명은 아래에서 할 예정이므로 지금은 간단하게 넘어가겠습니다.
</aside>
정규표현식은 괄호 안에 있는 매칭 패턴을 캡쳐(capturing)합니다. 이는 괄호로 그룹화된 부분에 매치된 문자열을 추출하는 것입니다.
const str = 'apple9banana8orange';
const splitArr = str.split(/(\\d)/);
console.log(splitArr);
// [ 'apple', '9', 'banana', '8', 'orange' ]
위와 같이 매칭 패턴을 괄호 기호를 사용해 그룹화한다면 이것이 캡쳐링되고, split된 배열에 포함됩니다.