javascript 정규식(정규 표현식) 사용하기

정규식이란?

정규 표현식, 줄여서 정규식은 어떤 문자열에서 원하는 특정 문자(열)을 탐색하는 방법이다. 반복문과 각종 string 메소드를 사용하면 정규식 없이도 원하는 문자를 찾을 수 있겠지만, 정규식을 사용하면 훨씬 길이를 단축하고 가독성을 높일 수 있다. 공식 문서에서는 '문자열에서 특정 문자 조합을 찾기 위한 패턴'이라고 설명하고 있다.

 

정규식은 웹 개발 시 데이터로부터 원하는 정보를 추출할 때 유용하게 활용할 수 있으며, 로그 분석 도구인 GA4와 Looker studio의 필터에도 정규식을 활용할 수 있는 옵션이 존재한다. (정규식을 할 줄 안다면 이 두가지 도구에서 필터를 훨씬 간편하게 이용 가능해진다.)

 

 

정규식을 만들고, 결과를 리턴받는 법

javascript에서 정규 표현식을 만드는 방법은 크게 두 가지다. 

const re1 = /\s\w*/; // 슬래시(/)를 활용하여 정규직 생성
const re2 = new RegExp("ab+c"); // RegExp 클래스로 정규식 생성

const re3 = "\s\w*"; //일반 문자열

console.log(typeof(re1), typeof(re2), typeof(re3));
//(결과) object object string

 

문자열을 선언할 때 큰따옴표 안에 넣는 것 처럼, 정규식을 생성할 때는 슬래시 사이에 원하는 패턴을 넣는다. 혹은, RegExp 정규식 클래스로 객체를 생성할 수도 있다. 두 가지 방법 모두 출력해보면 "/s\w*/" 정규식이 출력된다. type 또한 찍어보면 무사히 object 형태로 만들어졌다는 사실을 알 수 있다.

 

이제 만든 정규식으로 문자열에서 원하는 문자(열)을 찾는 코드를 실행해보자. 위 코드에서 만든 정규식 \s\w* 은 "앞에 공백 문자(space, tab, 기타 유니코드 상에서의 공백을 의미하는 문자)가 오고, 뒤에는 알파벳 문자가 0개 이상 붙는 패턴"을 정의한 것이다. 따라서 문자열 "hello regex"에 위 정규식을 적용시키면, " regex" 문자열을 얻어낼 수 있다.

 

javascript는 정규식 클래스인 RegExp에서는 사용자가 생성한 정규식에 해당하는 문자열을 리턴하는 몇가지 메소드를 정의하고 있다. 종류는 다음과 같다.

let text = "hello regex"
let reg = /\s\w*/;

console.log(reg.exec(text).toString()); //(1) exec() 함수 사용 ... (결과) " regex"
console.log(reg.test(text)); //(2) test() 함수 사용 ... (결과) true

 

exec() 메소드는 정규식에 해당하는 문자들을 배열로 리턴하고, test() 메소드는 정규식에 해당하는 문자열이 원본 문자열에 포함되어있는지 여부에 따라 boolean 값을 리턴한다. 그 외에도 RegExp 클래스는 사용자가 정규식을 보다 편하게 사용할 수 있게 하는 다양한 메소드를 지원하고 있으므로, 아래 페이지를 참고해보면 도움이 될 것이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp

RegExp - JavaScript | MDN

 

 

정규 표현식 기본 문법

정규식 문법은 아래 공식 문서에서도 상세하게 확인할 수 있고, 이미 다른 블로그에 잘 정리해둔 글이 많기 때문에 이 포스트에서는 내가 자주 쓸 것 같은 몇가지 문법만 간단하게 정리해두려고 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

정규 표현식 - JavaScript | MDN

 

정규 표현식의 문법은 (문자 클래스, 어설션, 그룹과 범위, 수량자, 이스케이프) 로 나눌 수 있다.

• \ : 정규식을 만들 때 사용. 혹은 정규식 문법 문자 자체를 정규식에 포함시키고자 할 때 사용한다. (ex. /*/ → /\*/)
• [abc] (=[a-c]) : 괄호 안의 문자 중 하나를 포함한 문자(열)을 탐색한다. ('-' 문자를 탐색하고자 할 때는 [abc-] 와 같이 맨 뒤에 붙인다.)
• ^a : 문자열의 맨 앞 글자가 a인 문자(열)를 탐색한다. 
• [^abc] : abc를 포함하지 않은 문자(열)를 탐색한다. (대괄호 속에서 사용될 때와 그렇지 않을 때의 의미가 다름)
• a$ : 문자열의 맨 끝이 a인 문자(열)를 탐색한다. 'multiline flag' 옵션을 true로 둘 경우, '\n' 앞의 문자도 탐색 범위에 둘 수 있다. (multiline flag 등 RegExp 옵션은 정규식 생성 시 설정할 수 있다. 옵션에 대해서는 해당 페이지 참조)
• \w : 알파벳과 숫자가 포함된 문자(열)를 탐색한다.
• \W : 알파벳 문자가 아닌 문자(열)을 탐색한다. (ex. %, É, etc...)
•  x? : 문자 x가 0회 또는 1회 포함되는 문자(열)를 탐색한다. 
• 그 외 기타 등등 많이 있음.

(+) 리액트를 공부하다보면 webpack.config.js 파일을 한번 쯤은 뜯어보게 되는데, babel loader 를 적용할 파일 확장자를 선택하는 항목에서 /\.jsx?$/ 라는 정규식을 마주치게 된다. 정규식을 알면 이제 이 문장을 해석할 수 있게 된다.

 

 

정규 표현식 익히기

편해 보이기는 하지만 조금 생소한 문법이다보니, 자주 사용하지 않으면 좀처럼 문법이 손에 안 익을 것 같았다. 그래서 정규 표현식을 연습할 수 있는 플랫폼을 알아봤다. https://regexone.com/

RegexOne - Learn Regular Expressions - Lesson 1: An Introduction, and the ABCs

 

한글 지원이 안되지만 정규식을 공부하고, 문제로 풀어보며 다음 단계로 넘어갈 수 있는 사이트라고 한다.

해당 사이트에서 틈틈이 연습해볼 계획이다.

 

 

END.