[JavaScript] 정규표현식(regular expression)

🌈 정규 표현식 정의

• 자바스크립트에서 정규 표현식은 RegExp 객체로 표현된다.

• 정규 표현식 리터럴은 한 쌍의 슬래시(/) 문자 사이에 위치한다.

  // s로 끝나는 모든 문자열과 매치된다.
  const pattern = /s$/; // 문자열 리터럴
  const pattern = new RegExp('s$'); // RegExp() 생성자를 사용하여 정의

🎈 리터럴 문자

• 모든 영문자와 숫자는 그 문자 그대로 정규 표현식에서 매치된다.

• 특정한 비-알파벳 문자들은 역슬래시(\)로 시작하는 이스케이프 문자열을 통해 지원한다.

• 구두점 문자(?,!,.,등등)를 일반 문자로 취급할려면 반드시 \를 문자 앞에 붙여야 한다.

  // 역슬래시를 포함하는 모든 문자열과 매치된다.
  const pattern = /\\/;

이스케이프 문자 - 위키백과, 우리 모두의 백과사전

🎈 문자 클래스

• 개별 리터럴 문자들은 그 문자들을 대괄호([])로 묶어서 문자 클래스로 다룰 수 있다.

• 문자 클래스는 해당 클래스 내의 모든 문자에 매치된다.

  // a, b, c 중 아무 글자에나 매치된다.
  const pattern = /[abc]/;

• 부정 문자 클래스는 대괄호 안에 있는 무자들을 제외한 모든 문자와 매치된다.

• 대괄호안에 캐럿(^)을 제일 앞에 두면 부정 문자 클래스를 정의할 수 있다.

  // a, b, c를 제외한 모든 문자와 매치된다.
  const pattern = /[^abc]/;

• 하이픈(-)을 사용하여 문자의 범위를 지정할 수 있다.

  // 소문자 a부터 z까지와 매치된다.
  const pattern = /[a-z]/;
  // 모든 알파벳 글자와 숫자와 매치된다.
  const pattern = /[a-zA-Z0-9]/;

• 자바 스크립트 정규 표현식 문법에는 자주 사용되는 문자 클래스를 나타내는 특수 문자와 이스케이프 문자열이 정의 되어 있다.

• 이스케이프된 특수 문자 클래스를 대괄호 내에서 사용할 수 있다.

  // 공백 문자 하나 또는 숫자 문자 하나와 매치된다.
  const pattern = /[\s\d]/;

• \b는 별도의 특별한 의미를 지니고 있지만, 문자 클래스 내에서 사용되면 백스페이스 문자를 나타낸다.

• 정규 표현식에서 백스페이스 문자 자체를 표현하려면 하나의 요소만 있는 문자 클래스를 사용해야 한다.

  // 백스페이스 리터럴
  const pattern = /[\b]/;

📌 정규 표현식 문자 클래스

• 문자	의미
  [...]	대괄호 사이에 있는 한 문자.
  [^...]	대괄호 사이에 없는 한 문자.
  .	줄바꿈 문자나 유니코드 라인 종료 문자를 제외한 모든 문자.
  \w	ASCII 워드 문자. [a-zA-Z0-9]와 같다.
  \W	ASCII 워드 문자가 아닌 모든 문자. [^a-zA-Z0-9]와 같다.
  \s	모든 유니코드 공백 문자.
  \S	유니코드 공백 문자가 아닌 모든 문자. (but! \w와 \S는 같지 않다.)
  \d	모든 ASCII 숫자. [0-9]와 같다.
  \D	ASCII 숫자가 아닌 모든 문자. [^0-9]와 같다.
  [\b]	백스페이스 리터럴(특수한 경우)

🎈 반복

• 반복을 지정하는 문자는 항상 반복을 지정할 패턴 뒤에 나온다.

  const pattern = /\d{2,4}/; // 두 자리에서 네 자리의 숫자와 매치된다.
  const pattern = /\w{3}\d?/; // 3개의 문자와 생략 가능한 숫자와 매치된다.
  const pattern = /\s+java\s+/; // java와 앞 뒤로 하나 이상의 공백 문자를 포함한 문자열과 매치된다.
  const pattern = /[^(]*/; // 시작 괄호가 아닌 0개 이상의 문자와 매치된다.

  📌 정규 표현식 반복 문자

• 문자	의미
  {n,m}	앞의 항목이 적어도 n번 이상, m번 이하로 나타난다.
  {n,}	앞의 항목이 n번 이상 나타난다.
  {n}	앞의 항목이 정확하게 n번 나타난다.
  ?	앞의 항목이 0 또는 한 번 나타난다. 즉, 안나올수도 있다.{0,1}과 같다.
  +	앞의 항목이 한 번 이상 나타난다. {1,}과 같다.
  *	앞의 항목이 0번 또는 그 이상 나타난다. {0,}과 같다.

• * 와 ? 반복 문자는 앞에 오는 문자가 0번 매치된다고 간주하기 떄문에 반복 문자열 앞의 문자가 매치되지 않는 상황에서도 허용한다.

  const pattern = /a*/;
  "bbbb".match(pattern);
  // ["", index: 0, input: "bbbb", groups: undefined]

🎈 대체, 그룹화, 참조

• 정규 표현식 문법은 대체 표현식(alternative), 부분 표현식 그룹화(grouping subexpression), 이전 부분 표현식을 참조하는 특별한 문자를 포함하고 있다.

🟦 대체 표현식(alternative)

• 파이프 문자( | )는 대체 표현식을 구분한다.

  // 문자열 ab 또는 cd 또는 ef와 매치된다.
  const pattern = /ab|cd|ef/;
  // 세 자리의 숫자문자 또는 네 개의 소문자로 이루어진 문자열과 매치된다.
  const pattern = /\d{3}|[a-z]{4}/;

• 대체 표현식은 매치를 발견할 때까지 왼쪽에서 오른쪽으로 수행된다.

  // ab에 적용하면, 오직 첫 번째 글자 a만 매치된다.
  const pattern = /a|ab/;
  "ab".match(pattern);
  // ["a", index: 0, input: "ab", groups: undefined]

🟦 부분 표현식 그룹화(grouping subexpression)

• 여러 항목을 하나의 부분 표현식으로 묶고(그룹화), 이렇게 묶인 항목들을 |,* ,+,? 등이 하나의 단위로 취급할 수 있도록 하는 것이다.

  // java와 그다음에 생략 가능한 script가 오는 문자열과 매치된다.
  const pattern = /java(script)?/;
  // ab 또는 cd가 한 번 이상 반복되는 문자열 혹은 무자열 ef와 매치된다.
  const pattern = /(ab|cd)+|ef/;

🟦 이전 부분 표현식

• 전체 패턴 안에 부분 패턴을 정의하는 것이다.

• 정규 표현식이 대상 문자열에 매치되면 괄호로 둘러싸인 특정 패턴과 매치되는 부분 문자열을 추출할 수 있다.

  // 만약 각 매치에 대해 끝에 있는 숫자를 뽑는다면, 괄호 안에 두고 찾아낸 매치 결과에서 숫자를 추출할 수 있다.
  const pattern = /[a-z]+(\d+)/;

• 괄호로 둘러싸인 부분 표현식을 사용하면 같은 정규 표현식 내에서 해당 부분을 다시 참조할 수 있다.

• 예를 들어 \1은 첫 번째 부분 표현식을 참조, \3은 세번째 부분 표현식을 참조한다.

  // 중첩된 부분 표현 ([Ss]cript)는 \2로 참조할 수 있다.
  const pattern = /([Jj]ava([Ss]cript?)\sis\s(fun\w*)/;

• 문자	의미
  파이프 문자	대체. 왼쪽에 있ㄴ는 부분 표현식이나 오른쪽에 있는 부분 표현식 중 하나를 매치한다.
  (...)	그룹화. 하나의 단위로 그룹화된 아이템으로 * ,+,?,파이프 문자등에 의해 사용될 수 있다. 나중에 이 그룹을 참조할 수 있도록 이 그룹과 매치된 문자를 기억한다.
  (?:...)	그룹화만 한다. 그룹의 항목들은 하나의 단위로 취급되지만, 이 그룹에 매치되는 문자들은 기억하지는 않는다.
  \n	n번째 그룹이 처음 매치했던 문자와 같은 문자를 매치한다.

🎈 정규 표현식 앵커(anchor)

• 매치에 사용할 문자를 지정하지 않고 매치가 일어날 수 있는 적절한 위치를 지정한다.

• 시작 부분에 정규식을 고정하는 ^와 문자열의 마지막에 정규식을 고정하는 $가 많이 사용된다.

  // JavaScript 문자열 자체가 매치된다.
  const pattern = /^JavaScript$/;
  // 이 경우 불필요한 공배까지 들어간다.
  const pattern2 = /\sJava\s/;
  "my Java Script".match(pattern2);
  // [" Java ", index: 3, input: " my Java Script ", groups: undefined]
  // 단어 경계에 매치된다. 불필요한 공백이 없다.
  const pattern3 = /\bJava\b/;
  "my Java Script".match(pattern3);
  // ["Java", index: 3, input: "my Java Script", groups: undefined]

• (?= 와 ) 사이에 표현식이 있으면 이는 긍정형 전방 탐색 선언문이고, 이는 사이에 있는 문자들이 반드시 매치되어야 한다는 의미지만, 매치된 문자열이 결과에 포함되지 않는다는 뜻이다.

• (?!를 사용하여 선언문을 만들면 부정형 전방 탐색이고, 그다음에 나오는 문자열들이 매치되면 안 된다는 뜻이다.

• ✨ 더 자세한 내용은 참고

정규 표현식(Regex) 강좌 9편. 전후방탐색(lookaround)

• 문자	의미
  ^	문자열의 시작 부분, 정규식이 어려 줄을 대상으로 하는 경우 한 줄의 시작과 일치한다.
  $	문자열의 끝을 나타낸다. 여러 줄일 경우 한 줄의 마지막을 나타낸다.
  \b	단어 경계를 나타낸다
  \B	단어 경계가 아닌 곳의 위치를 나타낸다.
  (?=p)	전방 탐색 선언으로 패턴 p와 매치되어야 하지만, 매치 결과에는 포함되지 않는다
  (?!p	부정형 전방 탐색 선언으로 '(?!' 다음에 나오는 문자들은 패턴 p와 매치되지 않아야 한다.

🎈 플래그(flag)

• 다른 정규 표현식 문법과는 달리 플래그는 / 문자 쌍 바깥에, 즉 두 번째 슬래시 다음에 쓴다.
• i 플래그는 대소문자를 구별하지 않고 패턴 매칭이 되어야 한다.
• g 플래그는 전역 패턴 매칭을 지정하는데, 즉 검색할 문자열내에서 패턴의 첫 번째 매칭 결과뿐 아니라 모든 매칭 결과를 얻는다.
• m 플래그는 여러 줄에 걸쳐 패턴 매칭을 수행하는 것으로 m 플래그를 지정한 상태에서 검색될 문자열이 줄바꿈 문자를 포함하고 있으면, ^와 $ 앵커는 문자열의 시작과 끝을 나타낼 뿐만 아니라 각 줄의 시작과 끝을 나타내기도 한다.

  // java 뿐만 아니라 Java\nis fun 에도 매치된다.
  const pattern = /java$/im/;

  📌 정규 표현식 플래그

• 문자	의미
  i	대소문자를 구별하지 않는 매칭을 수행한다.
  g	전역 매칭을 수행한다. 즉, 처음 매치에서 끝내지 않고 모든 매치를 찾는다.
  m	여러 줄모드로 ^은 줄의 시작이나 문자열의 시작과 일치하고, $는 줄의 끝이나 문자열의 끝과 일치한다.

🌈 참고 문서

•  MDN 공식 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D

정규 표현식