🏆 Javascript(3) 정규표현식(0) 기본 사용법

정규표현식은 문자열에서 특정 조합을 추출하기 위한 패턴이다.

정규표현식도 객체로 취급되며, 주로 객체 내장 메소드 또는 문자열 메소드와 함께 쓰인다.

정규표현식 생성

const myReg = new RegExp("pattern", "flags");
const myLitReg = /pattern/flags;

리터럴 표현식은 패턴이 문자열 형식으로 들어가지 않는다. 그렇기 때문에 템플릿 리터럴을 이용한 동적인 생성이 불가능하다.

패턴이 확정적일 때 리터럴 표현식을 사용하면 좋다.

문자 검색, 문자 추출, 문자 대체 등 다양하게 쓰일 수 있기 때문에 정규식에 익숙해지는 게 좋다.

📅 패턴

const str = `Hi there, Nice to meet you. And Hello there and hi.
I love grey(gray) color not a gry, graay and graaay.
Ya ya YaYaYa Ya
`;

const regExp = /Hi/;

console.log(str.match(regExp));

[
  'Hi',
  index: 0,
  input: 'Hi there, Nice to meet you. And Hello there and hi.\n' +
    'I love grey(gray) color not a gry, graay and graaay.\n' +
    'Ya ya YaYaYa Ya\n',
  groups: undefined
]

패턴은 말 그대로 찾으려는 문자 패턴이다. 문자가 그대로 와도 되고 후술할 문자 플래그의 형태로 올 수도 있다.

📅 플래그

const str = `Hi there, Nice to meet you. And Hello there and hi.
I love grey(gray) color not a gry, graay and graaay.
Ya ya YaYaYa Ya
`;

const regExp = /Hi/;
const newRegExp = /Hi/gi;

console.log(str.match(regExp));
console.log(str.match(newRegExp));

[
  'Hi',
  index: 0,
  input: 'Hi there, Nice to meet you. And Hello there and hi.\n' +
    'I love grey(gray) color not a gry, graay and graaay.\n' +
    'Ya ya YaYaYa Ya\n',
  groups: undefined
]
[ 'Hi', 'hi' ]

플래그는 위 예시의 newRegExp처럼 리터럴일 경우 정규식의 뒤에 붙인다. 주로 사용되는 플래그는 다음과 같다.

• g, 매칭되는 모든 문자열 찾기, 없으면 첫 번째 결과만 반환
• m, 멀티라인, 문장의 시작이나 끝을 참조하는 패턴일 시 줄 별로 찾음
• i, 문자 대소문자 구분 안함

📅 앵커

const str = `Hello there, Nice to meet you. And Hello there and hi. Bye~
Hello I love grey(gray) color not a gry Bye~, Hello graay and graaay. Bye~
Hello Ya ya Hello YaYaYa Bye~ Ya Bye~
`;

const shortStr0 = `Hello my name is Lee.`;
const shortStr1 = `Hello my name is Lee. See u later`;

const regExp0 = /^Hello/g;
const regExp1 = /^Hello/gm;
const regExp2 = /Bye~$/gm;
const regExp3 = /^Hello my name is Lee.$/;

console.log(str.match(regExp0));
console.log(str.match(regExp1));
console.log(str.match(regExp2));
console.log(shortStr0.match(regExp3));
console.log(shortStr1.match(regExp3));

[ 'Hello' ]
[ 'Hello', 'Hello', 'Hello' ]
[ 'Bye~', 'Bye~', 'Bye~' ]
[
  'Hello my name is Lee.',
  index: 0,
  input: 'Hello my name is Lee.',
  groups: undefined
]
null

주어진 정규식에서 ^ 문자는 텍스트의 시작 위치에 대응한다. 그렇기 때문에 str의 Hello 중에서도 문자의 시작 부분에만 매칭된다.

이때 regExp1의 경우 m 옵션을 사용했는데, 줄 단위로 탐색하기 때문에 Hello가 3개 매칭됐다.

$ 문자는 문장의 끝과 대응된다. regExp2의 실행 결과를 보면 m 옵션을 따라 줄 단위로 끝 부분의 Bye~만 반환하는 것을 볼 수 있다.

^와 $을 함께 사용하면 문장이 정규식과 완전히 일치할 경우만 매칭된 것으로 간주한다.

shortStr0과 shortStr1에서 regExp3의 반환 결과를 보면 그것을 확인할 수 있다.

📅 문자 클래스

정규식에서는 문자 클래스 기능을 지원한다.

const str = `
This_is my example string!!! Put Your Hands Up.
[1, 2, 3, 4, 5] is Array and Array is      one      of { Object }.
한글도 되나요...?
`;

const wordRegExp = /\w+/g;
const numberRegExp = /\d+/g;
const spaceRegExp = /\s+/g;

console.log(str.match(wordRegExp));
console.log(str.match(numberRegExp));
console.log(str.match(spaceRegExp));

[
  'This_is', 'my',    'example',
  'string',  'Put',   'Your',
  'Hands',   'Up',    '1',
  '2',       '3',     '4',
  '5',       'is',    'Array',
  'and',     'Array', 'is',
  'one',     'of',    'Object'
]
[ '1', '2', '3', '4', '5' ]
[
  '\n', ' ',  ' ',      ' ',
  ' ',  ' ',  ' ',      ' ',
  '\n', ' ',  ' ',      ' ',
  ' ',  ' ',  ' ',      ' ',
  ' ',  ' ',  '      ', '      ',
  ' ',  ' ',  ' ',      '\n',
  ' ',  '\n'
]

\w는 언더바(_)를 포함한문자(0~9, a~z, A~Z)와 매칭되는 문자 클래스이다. 숫자와 언더바와 매칭된다는 것에 주의해야한다.

\d와 \s는 결과로 볼 수 있듯이 각각 숫자와 공백(줄바꿈 포함)과 매칭된다.

문자 클래스는 반대 클래스로도 사용 가능한데 사용법은 다음과 같다.

const str = `
This_is my example string!!! Put Your Hands Up.
[1, 2, 3, 4, 5] is Array and Array is      one      of { Object }.
한글도 되나요...?
`;

const notWordRegExp = /\W+/g;
const notNumberRegExp = /\D+/g;
const notSpaceRegExp = /\S+/g;

console.log(str.match(notWordRegExp));
console.log(str.match(notNumberRegExp));
console.log(str.match(notSpaceRegExp));

[
  '\n',
  ' ',
  ' ',
  ' ',
  '!!! ',
  ' ',
  ' ',
  ' ',
  '.\n[',
  ', ',
  ', ',
  ', ',
  ', ',
  '] ',
  ' ',
  ' ',
  ' ',
  ' ',
  '      ',
  '      ',
  ' { ',
  ' }.\n한글도 되나요...?\n'
]
[
  '\nThis_is my example string!!! Put Your Hands Up.\n[',
  ', ',
  ', ',
  ', ',
  ', ',
  '] is Array and Array is      one      of { Object }.\n한글도 되나요...?\n'
]
[
  'This_is',    'my',    'example',
  'string!!!',  'Put',   'Your',
  'Hands',      'Up.',   '[1,',
  '2,',         '3,',    '4,',
  '5]',         'is',    'Array',
  'and',        'Array', 'is',
  'one',        'of',    '{',
  'Object',     '}.',    '한글도',
  '되나요...?'
]

결과에서 볼 수 있듯이 각각을 대문자로 적용하면 반대 값이 매칭된다.

문자 클래스에는 .도 있는데, .은 줄바꿈을 제외한 모든 값들과 매칭된다.

📅 \b, Word Boundary

const str = `
This_is my example string!!!
byebyebye
`;

const regExp0 = new RegExp('bye', 'g');
const regExp1 = /\bbye/g;
const regExp2 = /bye\b/g;
const regExp3 = /bye\B/g;

console.log(str.match(regExp0));
console.log(str.match(regExp1));
console.log(str.match(regExp2));
console.log(str.match(regExp3));

[ 'bye', 'bye', 'bye' ]
[ 'bye' ]
[ 'bye' ]
[ 'bye', 'bye' ]

word boundary는 문자의 경계와 매칭된다. 쉽게 생각하면 \w가 아닌 녀석이라고 생각하면 된다.

출처: https://ko.javascript.info/regexp-boundary

\b도 반대 클래스처럼 대문자를 이용하면 word boundary가 아닌 것과 매칭되는데 regExp3의 매칭 결과를 통해 확인할 수 있다.

끝이 word boundary가 아닌 첫 bye와 두 번째 bye가 매칭된다.

그런데 왜 \b를 써야할까? \W를 써도 될텐데 말이다.

const str = `
This_is my example string!!!
byebyebye
`;

const regExp0 = new RegExp('bye', 'g');
const regExp1 = /\Wbye/g;
const regExp2 = /bye\W/g;
const regExp3 = /bye\W/g;

console.log(str.match(regExp0));
console.log(str.match(regExp1));
console.log(str.match(regExp2));
console.log(str.match(regExp3));

[ 'bye', 'bye', 'bye' ]
[ '\nbye' ]
[ 'bye\n' ]
[ 'bye\n' ]

그 이유는 다음의 결과에서 직접 확인할 수 있다. 😐

📅 Set, range

const str = `
12345678
This_is my_example_
`;

const regExp0 = /[0-9]+/g;
const regExp1 = /[a-zA-Z]+/g;
const regExp2 = /[Tiem]+/g;

console.log(str.match(regExp0));
console.log(str.match(regExp1));
console.log(str.match(regExp2));

[ '12345678' ]
[ 'This', 'is', 'my', 'example' ]
[
  'T', 'i', 'i',
  'm', 'e', 'm',
  'e'
]

대괄호를 통해 Set과 range 기능을 활용할 수 있다. 0-9는 숫자 0 부터 9, a-z는 a 부터 z 등 다양하게 활용할 수 있다.

다만 아스키 코드 값을 참조하니 사용에 유의해야한다.

regExp2 같은 경우는 알파벳 T, i, e, m 중 하나에 매칭된다는 뜻이다.

📅 수량자(Quentifiers)

const str = `
010-898-0893
02-405-3412
010 405 3412
`;

const regExp = /\d{2,3}[- ]?\d{3}[- ]?\d{4}/g;

console.log(str.match(regExp));

[ '010-898-0893', '02-405-3412', '010 405 3412' ]

수량자는 매칭되는 패턴의 일정 개수를 표현할 때 사용한다. 중괄호 안에 숫자를 넣어서 사용하는데 의미는 다음과 같다.

{0, } 0 이상
{1, 3} 1 이상 3 이하

수량자는 간편하게 표현하는 shorthand 또한 제공한다.

수량자	의미	표현
*	0개 이상	{0,}
?	0 또는 1	{0,1}
+	1개 이상	{1,}