[Regex] 정규표현식 - Flags

 

 

이번에 개발 작업하면서 폼 유효성 검사 할 일이 많았는데요,

그 중에서도 정규표현식을 쓸 일이 꽤 있었습니다

 

처음에는 능력자분들이 만든거를 가져다 쓰기 시작했지만

저희 사이트에서 사용하기에는 맞지 않는 패턴들이어서 수정을 하거나 직접 만들어야 하는 일이 많았습니다

 

하지만 쓸 때마다 헷갈리고, 원하는대로 만들기 위해서는 또 쉽지 않더라구요..

지금도 테스트해가면서 만들고는 있지만 알다가도 모르겠는 정규표현식...

정리해가면서 공부하고 더 잘 사용하고 싶네요

 

RegExp - JavaScript | MDN

 

 

우선 기본적인 생김새는 아래와 같습니다

/(정규표현식패턴)/Flags

슬래시(/)를 양 옆에 두고 정규표현식 패턴을 작성하고, 맨 뒤에 Flags를 달아주게 됩니다

 

Flags(플래그) - 특성을 지정하는 것

플래그는 단독으로 사용할수도 있고, 순서 상관 없이 여럿을 한 번에 지정할 수도 있다

 

종류와 의미

Flag	설명
d	부분 문자열 일치에 대해 인덱스 생성
g	전역 탐색
i	대소문자를 구분하지 않음
m	여러 줄에 걸쳐 탐색
s	개행 문자가 기호 '.' 과 일치함
u	"unicode", 패턴을 유니코드 코드 포인트의 시퀀스로 간주함
y	"접착" 탐색, 대상 문자열의 현재 위치에서 탐색을 시작함

 

 

 g 나  i 는 많이 쓰기 때문에 알고 있었고,  m은 사용해보지는 않았지만 설명으로 이해되고

 d ,  s ,  u ,  y 가 제대로 이해되지 않아서 조금 더 찾아보았고, 이해한대로 작성해보았습니다.

 

아래 작성된 내용은 제대로 이해한 내용이 아니기에 정확한 정보는 아닙니다.

심지어 아직 s, u는 이해되지 않았습니다, 지적이나 가르침은 언제나 환영입니다!

 

 

1. d 는 인덱스가 있는지 없는지를 판단하는 것으로 보여진다

const str1 = 'foo bar foo';

const regex1 = new RegExp('foo', 'gd');

console.log(regex1.hasIndices); // Output: true

console.log(regex1.exec(str1).indices[0]); // Output: Array [0, 3]
console.log(regex1.exec(str1).indices[0]); // Output: Array [8, 11]

const str2 = 'foo bar foo';

const regex2 = new RegExp('foo');

console.log(regex2.hasIndices); // Output: false

console.log(regex2.exec(str2).indices); // Output: undefined

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices#using_hasindices

 

우선 위 내용을 조금 이해해보자면 d 플래그가 있어야 hasIndices가 발동하는 것 같고,

이 hasIndices가 발동해야 indices로 해당 인덱스를 뽑아올 수 있는 것으로 보여진다

 

2. s

const regex1 = new RegExp('foo', 's');

console.log(regex1.dotAll);
// expected output: true

const regex2 = new RegExp('bar');

console.log(regex2.dotAll);
// expected output: false

dotAll 속성은  "s" 플래그가 정규식과 함께 사용되는지 여부를 나타낸다고 한다

 

3. u 

const regex1 = new RegExp('\u{61}');
const regex2 = new RegExp('\u{61}', 'u');

console.log(regex1.unicode);
// expected output: false

console.log(regex2.unicode);
// expected output: true

console.log(regex1.source);
// expected output: "a"

console.log(regex2.source);
// expected output: "a"

unicode 속성은 "u" 플래그가 정규식과 함께 사용되는지 여부를 나타낸다고 한다

 

참고 : U-0061 이 a는 unicode 1.1 버전 (https://www.fileformat.info/info/unicode/version/1.1/index.htm)

 

아직은 s와 u 플래그는 조금도 이해가지 않는다 o(TヘTo)

 

 

 

4. y는 lastIndex 에서 시작하는 일치만 확인하도록 할 수 있다

 

아래 예제는 mdn 사이트에 있는 예제이다

const str1 = 'table football';
const regex1 = new RegExp('foo', 'y');

regex1.lastIndex = 6;

console.log(regex1.sticky);
// expected output: true

console.log(regex1.test(str1));
// expected output: true

// lastIndex가 변경되어 아래 결과가 false 되는 것 같아 찍어봄
console.log(regex1.lastIndex);
// expected output: 9

console.log(regex1.test(str1));
// expected output: false

 

위에서 한 가지 더 알게된 것은 정규표현식 검사를 한번 하고 나면 lastIndex가 변경된다는 것이다

 

그리고 y 플래그는 lastIndex에서 시작하는 일치만 확인할 수 있기 때문에

첫번째 결과는 true이지만 두번째 결과는 false인 것이다

 

아직은 이 내용만 가지고는 어떤 것에 적용하면 좋을지에 대한 생각은 떠오르지 않는다

다만 이런 기능이 있구나라는 것을 알고 넘어가자. 언젠가는 써먹을 때가 올테니 ( •̀ ω •́ )✧