정규표현식

정규 표현식

정규 표현식은 텍스트 내에서 일치하는 문자열을 찾기 위해 문자열의 패턴을 표현하는 방식을 말한다.

그래서 그 정규 표현식이 어떤 문제를 해결해 줄까? 정규표현식이 없다면 문자열에서 특정한 패턴이 있는지 확인하기위해선 복잡한 코드가 필요할 것이다. 책 한권 분량의 텍스트에서 전화번호 형식의 문자열을 추출해야 한다고 상상해보면, 복잡한 코드가 나올 것이다. 정규 표현식을 사용하면 코드가 간결해진다.

정규 표현식은 내가 쇼핑몰에서 웹퍼블리셔로 일할 때도 은근히 자주 사용됐었다. 무난한 예로는 고객에게 입력받는 이메일 혹은 전화번호의 형식이 바른지 검사가 필요한 경우에 사용됐고. 또 특정 상품군에만 이벤트 배너를 붙여야 하는 상황인 경우, (애초에 상품을 등록할 때, 상품군 데이터를 따로 입력해준다면 좋겠지만 데이터는 우리 생각보다 깔끔하게 얻을 수 없을 때가 더 많은 것 같다...) 배너를 붙일 상품을 분류할 때도 정규 표현식을 사용했었다.

정규 표현식 문법은 https://regexr.com/ 이곳에서 연습할 수 있다.

정규 표현식 사용법

우선 정규 표현식을 생성하는 방법은 2가지가 있다.

1. 정규표현식 리터럴 이용

   • const pattern = /test/;

2. RegExp객체의 인스턴스 생성

   • const pattern = new RegExp("test");

보통 개발시점에 어떤 정규 표현식을 이용할 지 알고 있는 경우에는 정규 표현식 리터럴을 사용하고, 실행 중에 문자열을 이용해서 동적으로 정규 표현식을 생성해야 할 때는 생성자(RegExp) 를 이용한다.

정규 표현식과 함께 사용할 수 있는 플래그라는 것이 있는데, 패턴에 적용되는 옵션이라고 생각하면 될 것 같다.

• 정규 표현식의 플래그
  • i : 정규 표현식이 대소문자를 구별하지 않도록 한다.
  • g : 기본 설정은 맨 처음 나타난 패턴만 매치시키지만, 이 플래그를 사용할 경우 지정된 패턴에 해당하는 모든 부분을 매치시킨다.
  • m : 여러줄을 포함하고 있는 문자열도 매치시킨다.

위 플래그들은 정규 표현시 리터럴은 끝에 /test/ig와 같이 추가하고, RegExp의 생성자에 적용할 때는 new RegExp("test", "ig")처럼 두번째 매개변수로 전달할 수 있다.

정규 표현식 문법

정규 표현식은 용어(terms)와 용어에 어떤 자격을 부여하는 연산자들로 구성되어있다.

• 정확히 같은 부분 매칭하기
  • 예를 들어 정규 표현식 /test/는 정확히 test라는 문자열 그대로 포함하는 패턴을 찾는다.
• 문자 클래스를 이용해서 매칭하기
  • 클래스 연산자를 이용해서 문자의 집합을 지정할 수 있다. 대괄호를 이용해서 [abc]와 같은 식으로 작성하면 된다. "a", "b", "c" 문자 중 하나라는 뜻이다.
  • 정해진 문자 집합을 포함하지 않는 문자를 매치하고 싶을 때는 캐럴(^)을 사용하면 된다. [^abc]와 같은 식으로 작성한다. "a", "b", "c"를 제외한 모든 문자라는 의미가 된다.
  • 문자의 범위를 나타내고 싶다면 [a-z]와 같은 식으로 -를 사용할 수 있다. "a"부터 "z"까이싀 소문자중 하나라는 의미다.
• 이스케이핑
  • \ : 정규 표현식 내에서 모든 문자들이 문자 그대로를 의미하진 않는다. 예를 들어 $나 ^의 경우엔 용어(term)에 어떤 자격을 부여하는 연산자를 의미한다. 이러한 특수문자를 문자 그대로 지정하려면 \을 앞에 붙여줘야 한다. \\라고 작성하면 \ 하나를 의미하게 된다.
• 시작과 끝
  • ^ : 문장의 시작 (문자 집합의 역집합과는 다름)
  • $ : 문장의 끝
• 반복된 출현
  • 0개 혹은 1개 : ?
  • 0개 혹은 1개 혹은 그 이상 : *
  • 1개 혹은 그 이상 : +
  • n번 반복 : {n}
  • 최소 : {min,}
  • 최소, 그리고 최대 : {min, max}
• 미리 정의된 문자 클래스
  • 숫자 (digit) : \d
  • 숫자가 아님 : \D
  • 문자 (word) : \w
  • 문자가 아님 : \W
  • 공백 (space) : \s
  • 공백이 아님 : \S
  • 단어의 경계를 나타내는 문자(단어 뒤에서 쓰임) : \b
  • 단어 내에서 문자의 경계가 아닌 문자 : \B
  • 줄바꿈 문자(\n)을 제외한 모든 문자 : .
• 그룹화
  • 그룹 : 소괄호 사용 (,)

  • /(Hi|Hello)|(And)/

  • 그룹을 데이터로 만들고 싶지 않다면 그룹 안에 ?:를 사용하면 된다.

  • /(?:Hi|Hello)|(And)/

• 선택(OR)
  • | : 선택

    • /(ab)+|(cd)+/

    • 위 정규 표현식은 "ab" 또는 "cd"가 1번 이상 나타나는 것에 매치가 된다.
• 역참조
  • 정규 표현식 내에 정의된 캡처를 나중에 사용하는 역참조라는 것이 있다. 역참조는 역슬래시 뒤에 참조할 캡처의 번호를 쓰는 방법으로 표현된다.

  • /<(\w+)(.+)<\/\1>/

  • 위와 같은 방법으로 활용할 수 있다. <strong>아무거나</strong>와 같은 엘리먼트를 매치할 때 쓰일 수 있다. 역참조를 지정할 수 없다면, 여는 태그와 짝을 이루는 닫는 태그를 미리 알아낼 방법이 없어서 매치시키는 것이 불가능하다.

자바스크립트에서 활용하는 방법

const regex = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be)\/([a-zA-Z0-9-_.]{11})/;
const url = 'https://www.youtu.be/-ZClicWm0zM';
url.match(regex);
const result = url.match(regex);
const youtubeID = resul[1];

---

참고

• 영상 : 드림코딩 아카데미 유튜브
  • 깃허브 링크 : https://github.com/dream-ellie/regex
  • 연습용 사이트 : https://regexr.com/5ml92
  • 퀴즈 사이트 : https://regexone.com/
• 서적 : Secret of the JavaScript Ninja (자바스크립트 닌자 비급)