layout: post title: 정규표현식 이해하기 categories: [dev] author: 문재범 email: [email protected] date: 2021-09-30 tag:
자바스크립트는 많은 언어의 특성이 믹스된 언어인데, 구문은 C언어, 프로토타입같은 상속 개념은 스킴, 그리고 정규식은 펄을 기반으로 한다.
자바스크립트에는 정규식을 활용하는 많은 함수들이 존재한다. 정규식(정규 표현식)이란 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규식을 이용해서 특정한 패턴의 문자열을 추출해 활용 할 수 있기 때문에 아주 유용하다.
그러나 정규식은 특수한 의미를 갖고 있는 '메타문자'와 일반적인 문자열을 의미하는 '리터럴'의 복잡한 조합으로 구성되어 있기 때문에 이해하기 어렵다는 단점이 있다.
개념을 이해하고 정규식 잘 활용한다면 프로그래밍 할 때 많은 도움이 된다. 또한 자바스크립트 언어 개발자이자, JSON 포맷의 창시자인 더글라스 크록포드의 자바스크립트 핵심 가이드에 따르면 성능상의 이점도 있다고 한다.
자바스크립트에서 정규 표현식을 사용하는 방법은 //(슬래쉬)에 정규표현식을 작성하거나, RegExp 생성자를 활용하는 방법이 있다. 전자의 경우는 단순하게 슬래쉬안에 정규표현식을 기술하면 자바스크립트는 이를 정규식으로 인식한다. 후자의 방법은 RegExp 생성자를 이용하는 방법으로 //를 제외한 표현식 자체를 생성자의 인자로 넣어주면 된다.
RegExp.exec 함수와 정규표현식을 이용해 간단한 url을 쪼개면서 정규표현식을 이해해보자. 여기서 exec 함수는 특정 문자열을 입력받아서 그룹 단위로 문자열을 캡처해서 배열로 반환하는 함수이다.
다음은 정규표현식을 이용해서 쪼개볼 url이다. 임의로 만든것 이다.
<https://www.mysite.com:8080/ko/docs/js?a=bj&b=c>
첫 번째 토큰은 http, https, ftp, sftp 같은 프로토콜이 되겠다. 두 번째는 /(슬래쉬)이다. 예제는 //이 요소로 추출될 것이다.세 번째는 포트번호다. 예제는 8080이 요소로 추출될 것이다. 네 번째는 경로이다. /ko/docs/js이다. 다섯 번째는 파라미터이다. js?a=bj&b=c이다.
정규표현식으로 표현하면 다음과 같다.
/^(?:([a-zA-z]+):)?(\\/{1,3})?([a-zA-Z0-9.]+)(?::([0-9]+))?([/a-zA-Z0-9]+)?(\\?(?:[a-zA-Z0-9]+=[a-zA-Z0-9]+&?)+)?$/
먼저 첫 번째 토큰인 프로토콜이다.
^(?:([a-zA-z]+):)?
여기에서 ^는 입력의 시작에 해당한다. 해당하지 않는다면 빠르게 첫 번째 토큰을 넘어 갈 수 있도록 해준다. (?:) 는 토큰에 대응시키지만, 대응한 것을 출력하지는 않는다고 생각하면 된다.