정규표현식의 플래그란? (what is flag in regular expression?)

정규표현식의 플래그란? (Regular Expression flags)

• 플래그로 정규표현식의 동작방식을 변경할 수 있다.
  • 정규표현식 전체의 동작방식에 영향을 미친다.
• /regex/flags
  • regex 자리에 정규표현식 패턴이 오고, flags 에 플래그가 온다.
• 플래그(flags)는 modifiers 라고 불리기도 한다.

플래그의 종류

• g (global)
• i (case-insensitive)
• m (multiline)
• s (dotall)
• u (unicode)
• y (sticky)

g (global) 플래그 설명과 예제

• 정규표현식의 기본 동작은 입력 문자열에서 매칭된 첫번째 케이스만을 찾아낸다.
• g (global) 플래그는 모든 케이스를 찾아내도록 한다.

g 플래그를 적용하지 않는다면

• 입력된 문자열: hello hello world
• 입력된 정규식: /hello/
• 매칭된 부분: hello
  • 첫번째 매칭 케이스를 매칭하고 멈춘다.

g 플래그를 적용한다면

• 입력된 문자열: hello hello world
• 입력된 정규식: /hello/g
• 매칭된 부분: hello hello
  • 첫번째 매칭 케이스만 매칭하고 멈추지 않고 전체 매칭 케이스를 찾아낸다.

i (case-insensitive) 플래그 설명과 예제

• i (case-insensitive) 플래그는 패턴에서 대소문자 구분을 무시한다.

i 플래그를 적용하지 않는다면

• 입력된 문자열: hello Hello world
• 입력된 정규식: /hello/g
• 매칭된 부분: hello
  • g 플래그가 적용됐음에도 소문자 hello 만 매칭된다.

i 플래그를 적용한다면

• 입력된 문자열: hello Hello world
• 입력된 정규식: /hello/gi
• 매칭된 부분: hello Hello
  • 대소문자 구분없이 hello 와 Hello 가 전부 매칭된다.

m (multiline) 플래그 설명과 예제

• m (multiline) 플래그는 ^ 와 $ 사용에 연관이 있다.
• ^ 와 $ 는 특정 패턴으로 시작하거나 끝나는 경우 매칭된다.
• ^ 와 $ 의 기본 동작은 문자열이 몇줄로 되어있건 하나의 큰 문자열로 친다.
  • 그래서 각각 줄마다 시작과 끝을 보지 않고 전체 문자의 시작과 끝만 본다.
• m (multiline) 플래그를 사용하면 각각의 줄에서의 시작과 끝이 모두 매칭된다.

m 플래그를 적용하지 않는다면

• 입력된 문자열

hello world
hello universe

• 입력된 정규식: /^hello/g
• 매칭된 부분: hello
  • 두 줄 다 hello 로 시작하지만 하나밖에 매칭시키지 못한다.

m 플래그를 적용한다면

• 입력된 문자열

hello world
hello universe

• 입력된 정규식: /^hello/gm
• 매칭된 부분: hello, hello
  • 각각의 줄을 따로 고려하기 때문에 hello, hello 두개가 매칭된다.

s (dotall) 플래그 설명과 예제

• . 의 기본 동작은 개행문자 (\n) 를 매칭시키지 않는다.
• s (dotall) 플래그를 사용하면 메타 문자열인 . 이 개행문자 (\n) 까지 매칭하도록 동작을 변경한다.

s 플래그를 적용하지 않는다면

• 입력된 문자열

hello
world

• 입력된 정규식: /hello.*world/g
• 매칭된 부분: 없음
  • . 의 기본 동작은 개행문자를 포함하지 않으므로 매칭된 부분이 없다.

s 플래그를 적용한다면

• 입력된 문자열

hello
world

• 입력된 정규식: /hello.*world/gs
• 매칭된 부분: 입력된 문자열 전체 가 매칭된다.
  • s 플래그 때문에 . 이 개행문자를 포함하게 돼서이다.

u (unicode) 플래그 설명과 예제

• u (unicode) 플래그를 사용하면 유니코드 모드를 활성화시킨다.
• 유니코드 모드를 활성화시키면 \p{유니코드 카테고리} 혹은 \P{유니코드 카테고리} 문법 이용이 가능해진다.
  • \p{X} 는 {X} 라는 {유니코드 카테고리} 를 매칭하는 것이다.
  • \P{X} 는 {X} 라는 {유니코드 카테고리} 를 제외하고 매칭하는 것이다.
• \p{L} 를 사용하면 특수문자가 아닌 글자(Letter)가 매칭된다.
• \p{Emoji} 를 사용하면 이모티콘이 매칭된다.
• 메인 카테고리와 서브 카테고리에 대해 이 링크 마지막 부분쯤에 상세히 나와있다.

u 플래그를 적용하지 않는다면

u 플래그를 설명하려면, 요구사항이 있는 예제가 적절하다.

• 요구사항: 특수문자를 제외하고 나머지만 뽑아내라
• 입력된 문자열

-h-e-l-l-o-안-녕-하-세-요-

• 입력된 정규식: /[a-zA-Zㄱ-힣]/g
  • 유니코드 range 를 주기 위해 위와 같은 정규식이 도출됐다.
• 매칭된 부분: hello안녕하세요
• 이 케이스의 요구사항에 대해서는 충분히 올바른 답을 끌어냈지만, 제3외국어가 등장한다면 또 케이스를 추가해야 한다.
  • -h-e-l-l-o-안-녕-하-세-요-世-界-こ-ん-に-ち-は-ü-ç-! 이 케이스에 대응할 수 없다.

u 플래그를 적용한다면

• 요구사항: 특수문자를 제외하고 나머지만 뽑아내라
• 입력된 문자열

-h-e-l-l-o-안-녕-하-세-요-世-界-こ-ん-に-ち-は-ü-ç-!

• 입력된 정규식: /\p{L}/gu
• 매칭된 부분: hello안녕하세요世界こんにちはüç
• 제3외국어가 추가되더라도 올바른 답을 끌어낼 수 있다.
• 정규표현식 패턴 자체가 엄청 간결해지기도 한다.

다른 예제 케이스

• \p{Emoji}: 이모지만 추출하기
  • \P{Emoji}: 이모지만 빼고 추출하기
• \p{N} or \p{digit}: 숫자만 추출하기
  • \P{N} or \P{digit}: 숫자만 추출하기

p 와 P 를 자유롭게 변경하며 응용이 가능하다.

y (sticky) 플래그 설명과 예제

• y 플래그는 소비된 시작 위치를 주입하고, 해당 위치에 정확히 패턴이 있는지를 검사할 수 있게 해준다.
  • 자바스크립트 정규표현식 객체에는 lastIndex 라는 속성이 존재한다.
  • lastIndex 는 내가 문자열을 어디까지 소비했는지 위치를 기억하는 속성이다.
  • 정규표현식은 글자가 패턴에 맞는지 확인하며 글자를 소비한다.
    • 소비한다는 것은 lastIndex 를 늘려가 더이상 뒤의 글자를 보지 않음을 의미한다.
    • lastIndex 는 내가 글자를 어디까지 소비했는지에 대한 위치로 볼 수 있다.
  • lastIndex 속성에 지정된 정확한 위치에서 패턴 매칭을 시작하도록 한다.

y 플래그를 적용하지 않는다면

예제의 출처: javascript.info/regexp-sticky

let str = 'let varName = "value"';

let regexp = /\w+/;

regexp.lastIndex = 3;
console.log(regexp.exec(str)); // ['let', index: 0, input: 'let varName = "value"', groups: undefined]

regexp.lastIndex = 4;
console.log(regexp.exec(str)); // ['let', index: 0, input: 'let varName = "value"', groups: undefined]

y 플래그를 적용한다면

let str = 'let varName = "value"';

let regexp = /\w+/y;

regexp.lastIndex = 3;
console.log(regexp.exec(str)); // null

regexp.lastIndex = 4;
console.log(regexp.exec(str)); // ['varName', index: 4, input: 'let varName = "value"', groups: undefined]

• 정확히 4번째 인덱스의 문자까지 소비한 이후로 시작 위치를 고정한 뒤에 패턴에 매칭되는 케이스가 있는지 확인한다.
• 3번째 인덱스의 문자까지 소비한 이후엔 공백이 나오기 때문에 일치하는게 없어서 null 이 로깅된다.