실제 업무 상황을 생각해봅시다. "+7(903)-123-45-67"같은 전화번호에서 79035419441처럼 숫자만 남겨야 합니다.

이렇게 하려면 숫자가 아닌 문자를 모두 찾아서 지우면 되겠죠. 여기서 문자 클래스를 사용할 수 있습니다.

문자 클래스(character class) 는 특정 집합에 포함된 모든 기호에 일치하는 특별한 표현입니다.

가장 먼저 숫자 클래스부터 알아봅시다. 숫자(digit) 클래스는 \d라고 ì“°ê³  '아무 숫자 하나’에 대응합니다.

앞에서 나온 전화번호 예시에서 첫 번째 숫자를 찾아봅시다.

let str = "+7(903)-123-45-67";

let regexp = /\d/;

alert( str.match(regexp) ); // 7

g 플래그가 없으면 ì •ê·œ 표현식은 패턴과 일치하는 첫 문자만 찾습니다. 여기서는 \d에 일치하는 첫 번째 숫자이죠.

이제 g 플래그를 추가해 모든 숫자를 찾아봅시다.

let str = "+7(903)-123-45-67";

let regexp = /\d/g;

alert( str.match(regexp) ); // 일치하는 문자의 배열: 7,9,0,3,1,2,3,4,5,6,7

// 이 배열로 숫자만 있는 전화번호를 만듭시다.
alert( str.match(regexp).join('') ); // 79035419441

여기까지 숫자를 찾는 문자 클래스였습니다. 물론 다른 문자 클래스도 있습니다.

자주 사용하는 문자 클래스에는 다음 클래스가 있습니다.

\d ('digit(숫자)'의 ‘d’)

숫자: 0에서 9 사이의 문자

\s ('space(공백)'의 ‘s’)

스페이스, 탭(\t), 줄 바꿈(\n)을 비롯하여 아주 드물게 쓰이는 \v, \f, \r 을 포함하는 공백 기호

\w ('word(단어)'의 ‘w’)

‘단어에 들어가는’ 문자로 라틴 문자나 숫자, 밑줄 _을 포함합니다. 키릴 문자나 힌디 문자같은 비 라틴 문자는 \w에 포함되지 않습니다.

예를 들어 \d\s\w는 1 a처럼 ‘숫자’ 뒤에 ‘공백 문자’ 뒤에 '단어에 들어가는 문자’를 의미합니다.

정규 표현식에 일반 기호와 문자 클래스를 같이 사용할 수 있습니다.

예시로, CSS\d는 CSS 뒤에 숫자 하나가 있는 문자열과 일치합니다.

let str = "Is there CSS4?";
let regexp = /CSS\d/;

alert( str.match(regexp) ); // CSS4

또한 문자 클래스를 여러 개 사용할 수도 있습니다.

alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'

일치 결과(각각의 문자 클래스에 글자 하나씩 일치):

반대 클래스

모든 문자 클래스에는 '반대 클래스’가 있습니다. 같은 글자로 표기하지만 대문자로 사용합니다.

'반대’란 다음 예시들처럼 해당 문자를 제외한 모든 문자에 일치한다는 뜻입니다.

\D

숫자가 ì•„ë‹Œ 문자: \d와 일치하지 않는 일반 글자 등의 모든 문자

\S

공백이 ì•„ë‹Œ 문자: \s와 일치하지 않는 일반 글자 등의 모든 문자

\W

단어에 들어가지 않는 문자: \w와 일치하지 않는 비 라틴 문자나 공백 등의 모든 문자

이번 챕터의 첫 부분에서 +7(903)-123-45-67같은 문자열에서 숫자를 모두 찾아 합쳐서 숫자만 남은 전화번호를 만드는 방법을 알아봤습니다.

let str = "+7(903)-123-45-67";

alert( str.match(/\d/g).join('') ); // 79031234567

더 짧게 í•  수 있는 다른 방법은 \Dë¡œ 숫자가 ì•„ë‹Œ 문자를 찾아 문자열에서 없애버리는 것입니다.

let str = "+7(903)-123-45-67";

alert( str.replace(/\D/g, "") ); // 79031234567

점은 '아무 문자’에나 일치

점.은 줄 바꿈 문자를 제외한 모든 문자와 일치하는 특별한 문자 클래스입니다.

예시:

alert( "Z".match(/./) ); // Z

정규 표현식 안에서도 사용 가능합니다.

let regexp = /CS.4/;

alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4 (공백도 문자예요.)

점은 아무 문자에나 일치하지만 '문자의 부재’와 일치하지는 않습니다. 반드시 일치하는 문자가 있어야 합니다.

alert( "CS4".match(/CS.4/) ); // null, 점과 일치하는 문자가 없기 때문에 일치 결과가 없습니다.

‘s’ 플래그와 점을 사용해 정말로 모든 문자 찾기

기본적으로는 점은 줄 바꿈 문자 \n와는 일치하지 않습니다.

즉, ì •ê·œ 표현식 A.B는 A와 B 사이에 \n을 제외한 ì–´ë–¤ 문자든 들어간 문자열과 일치합니다.

alert( "A\nB".match(/A.B/) ); // null (일치하지 않음)

실제로는 점이 줄 바꿈 문자를 포함한 정말로 모든 문자와 일치해야 하는 상황이 자주 있습니다.

이럴 ë•Œ 사용하는 것이 s입니다. ì •ê·œ 표현식에 s를 사용했을 ë•Œ 점.은 모든 문자와 일치합니다.

alert( "A\nB".match(/A.B/s) ); // A\nB (일치!)

alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (일치!)

alert( "1 - 5".match(/\d-\d/) ); // null, 일치 결과 없음!

alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, 이제 제대로 되네요.
// \s 클래스를 사용해도 됩니다.
alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, 이것도 됩니다.

요약

문자 클래스에는 다음 클래스들이 있습니다.

• \d – 숫자
• \D – 숫자가 ì•„ë‹Œ 문자
• \s – 스페이스, 탭, 줄 바꿈 문자
• \S – \s를 제외한 모든 문자
• \w – 라틴 문자, 숫자, 밑줄 '_'
• \W – \w를 제외한 모든 문자
• . – ì •ê·œ 표현식 's' 플래그가 있으면 모든 문자, 없으면 줄 바꿈 \n을 제외한 모든 문자

하지만 이게 전부가 아닙니다!

자바스크립트에서 문자열에 사용하는 유니코드 인코딩은 문자에 여러 프로퍼티를 제공합니다. 어떤 언어에 속하는 글자인지 또는 글자가 아닌 구두점인지 알려주는 프로퍼티처럼요.

이런 프로퍼티를 기준으로 문자를 찾을 수도 있습니다. u 플래그를 사용하면 되는데요. 다음 글에서 알아보도록 하죠.