정규 표현식 파고들기 1

정규식을 사용하다 보니 단순히 /[0-5]/ 이런것이거나 /a/ig 이런식으로 간단하게 숫자를 찾거나 a를 찾는것은 가능했다.

하지만 더 자세하게 /s , /w 이런 유형들을 보니 얕게 사용해왔던거 같아 공부하기 위해 여러 방법으로 사용해 보았다.

테스트는 MDN에 자료를 보면서 직접 해보았다.

 

일단 문자열을 하나 준비했다.

const str = `
Hello, I'm StartCoriny. Nice to meet you.
My cell phone number is 010-1234-5678 and my home phone number is 02-1234-5678.
If anything happens, please contact me here!!
among the numbers 0 to 9, I like 3456 the most.
My email is aaa@naver.com!
What special characters do you mainly use?
I seem to use ** and ^^ often these days.
`;

 

new RegExp('pattern' , 'flag') || /pattern/flag

위 두 방법은 정규 표현식을 사용할때 패턴과 플래그를 사용하는 두가지 방법이다.

new RegExp('pattern' , 'flag')

  • 생성자 함수를 사용하여 정규표현식 객체를 생성한다.

  • 첫번째 매개변수는 문자열로서 정규표현식 패턴을 의미, 두번째 매개변수는 문자열로서 정규표현식 플래그를 의미 한다.

  ex) new RegExp('[0-9]' , 'g') → 모든 문자열에서의 0부터 9까지의 일치하는 숫자를 찾는다.

/pattern/flag

  • 리터럴 표기법으로 정규표현식을 생성한다. 

  • pattern은 정규표현식 패턴을 의미, flag는 문자열로서 정규표현식 플래그를 의미 한다.

  • 즉 생성자 함수보다 좀더 편리하게 직관적으로 정규 표현식을 사용할수가 있다.

  ex) /[0-9]/g → 모든 문자열에서의 0부터 9까지의 일치하는 숫자를 찾는다.

[a-c] || [abc] , [^a-c]

  • 두 방법은 같은 방법이다. a-c까지의 문자중 하나를 의미 한다.

  •  - 를 사용하면 연속되는 문자나 숫자들을 함축시켜서 표현할수가 있다.

  •  ^는 부정 문자 클래스이다. ^기호를 사용 하여 부정을 표현할수도 있다. 즉, a-c사이의 문자를 제외한 다른 문자를 가리킨다.

let regex = /[^0-9]/g;
console.log(str.match(regex).join(""));
/*
Hello, I'm StartCoriny. Nice to meet you.
My cell phone number is -- and my home phone number is --.
If anything happens, please contact me here!!
among the numbers  to , I like  the most.
My email is aaa@naver.com!
What special characters do you mainly use?
I seem to use ** and ^^ often these days.
*/

숫자를 제외한 다른 것들은 모두 출력되었다.

 

그럼 여기서 문자를 모두 제외 시키면 어떻게 될까?

let regex = /[^a-z]/gi;

console.log(str.match(regex).join(""));

/*
, ' .    .
     010-1234-5678       02-1234-5678.
  ,    !!
   0  9,   3456  .
   @.!
      ?
    **  ^^   .
*/

영문을 제외한 공백, 숫자, 특수문자는 모두 출력 되었다.

 

 

/a.c/

  • .은 어떤 문자하나와 일치하는 와일드 카드 메타 문자이다. 개행문자인 \n을 제외한 모든 문자에 일치한다.

const str1 = "abc";
const str2 = "axc";
const str3 = "ac";
const str4 = "a\nc";
const regex = /a.c/;

console.log(regex.test(str1)); // true
console.log(regex.test(str2)); // true
console.log(regex.test(str3)); // false
console.log(regex.test(str4)); // false

위 처럼 .에는 어떤 문자열이든지 하나의 문자열이 들어올수가 있지만 비어 있으면 false로 판별이 된다.

 

그렇다면 저기에 전역문자열을 의미하는 g플래그를 넣으면 어떻게 될까?

const str1 = "abc";
const str2 = "axc";
const str3 = "ac";
const str4 = "a\nc";
const regex = /a.c/g;

console.log(regex.test(str1)); // true
console.log(regex.test(str2)); // false
console.log(regex.test(str3)); // false
console.log(regex.test(str4)); // false

abc말고는 전부 false가 나오게 된다.

왜지?

하나씩 풀어서 봐봤다.

a . c 이렇게 값이 들어오는게 맞는지 확인하여 불리언 값을 출력한다.

a . c = a b c → 와일드 카드인 . 자리에 b가 들어와서 true

a . c = a x c → 와일드 카드인 . 자리에 x가 들어왔는데  true가 아니라  false가 나왔다.?

 

그 이유는 전역플래그 g 때문이였다.

전역 플래그에서 test()는 lastIndex를 업데이트 하게 된다.

다시 test()를 호출한다면 lastIndex부터 시작해서 다시 검색을 시작한다.

즉, true를 반환할때마다 lastIndex가 증가하게 되고 false를 반환한다면 lastIndex가 0으로 초기화 된다.

const str1 = "abc";
const str2 = "abc";
const str3 = "abc";
const regex = /a.c/g;

// regex.lastIndex = 0
console.log(regex.test(str1)); // true

// regex.lastIndex = 3
console.log(regex.test(str2)); // false

// regex.lastIndex = 0
console.log(regex.test(str3)); // true

이걸 다시 한번 확인해보았다.

 

lastIndex부터 검색이 시작된다 하였으므로 그러면 str2에 해당 인덱스부터 검색할 문자열이 있다고 하면

const str1 = "abc";
const str2 = "abcabc";
const str3 = "abcabcabc";
const regex = /a.c/g;

// lastIndex = 0
console.log(regex.test(str1)); // true
// lastIndex = 3
console.log(regex.test(str2)); // true
// lastIndex = 6
console.log(regex.test(str3)); // true

해당 인덱스부터 시작하도록 문자열을 다 넣어주었을때 0부터 검색, 3부터 검색, 6번째 인덱스부터 검색을 하게 되어

모두 true를 반환하는것을 확인할 수가 있었다.

 

/\d/ || /\D/

  • d : digit(숫자), 하나라도 숫자에 일치하는 문자를 나타낸다.

  • /\d/ : [0-9]를 의미하며 [0-9]를 \d로 사용할수가 있다.

  • /\D/ : [^0-9]를 의미하며 [^0-9]를 \D로 사용할수가 있다.

let regexLowerd = /[^\d]/gi;
let regexUpperD = /[\D]/gi;

console.log(str.match(regexLowerd).join(""));
console.log(str.match(regexUpperD).join(""));

/*
Hello, I'm StartCoriny. Nice to meet you.
My cell phone number is -- and my home phone number is --.
If anything happens, please contact me here!!
among the numbers  to , I like  the most.
My email is aaa@naver.com!
What special characters do you mainly use?
I seem to use ** and ^^ often these days.
*/

위 처럼 [0-9]로 제외한것과 같이 숫자를 제외한 모든 문자들이 나오는걸 확인 할수가 있다.

 

/\w/ || /\W/

  • w : word character(단어 문자), 단어문자는 알파벳(a-z, A-Z), 숫자(0-9), 밑줄(_)을 나타낸다.

  • /\w/ : 단어 문자를 의미하며 알파벳, 숫자, 밑줄을 \w로 사용할수가 있다.

  • /\W/ : 단어 문자가 아닌 문자 즉, [^a-zA-Z0-9_]를 의미하며 [^a-zA-Z0-9_]를 \W로 사용할수가 있다.

let regexw = /[\w]/gi;
let regexW = /[\W]/gi;
console.log(str.match(regexw).join(""));
console.log(str.match(regexW).join(""));
/* \w
HelloImStartCorinyNicetomeetyouMycellphonenumberis01012345678andmyhomephonenumberis0212345678Ifanythinghappenspleasecontactmehereamongthenumbers0to9Ilike3456themostMyemailisaaanavercomWhatspecialcharactersdoyoumainlyuseIseemtouseandoftenthesedays
*/

/* \W

, ' .    .
     --       --.
  ,    !!
     ,     .
   @.!
      ?
    **  ^^   .

*/

/w는 공백과 특수문자를 제외한 모든 단어 문자들이 출력된 반면에

/W는 모든 단어문자들이 제외 되었지만 공백, 개행, 특수문자들이 출력된것을 확인 할 수가 있다.

 

/\s/ || /\S/

  • s : whitespace character(공백 문자), 공백문자(스페이스, 탭, 개행 문자)를 나타낸다.

  • /\s/ : 공백문자를 \s로 사용할수가 있다.

  • /\S/ : 공백 문자가 아닌 문자를 의미하며 \S로 사용할수가 있다.

let regexs = /[^\s]/gi;
let regexS = /[\S]/gi;
console.log(str.match(regexs).join(""));
console.log(str.match(regexS).join(""));
/*
Hello,I'mStartCoriny.Nicetomeetyou.Mycellphonenumberis010-1234-5678andmyhomephonenumberis02-1234-5678.Ifanythinghappens,pleasecontactmehere!!amongthenumbers0to9,Ilike3456themost.Myemailisaaa@naver.com!Whatspecialcharactersdoyoumainlyuse?Iseemtouse**and^^oftenthesedays.
*/

 

모두 공백이 제거되고 특수문자 포함 문자들이 나온다. 나오는것을 확인할수가 있다.

 

---

 

예제

1. 전화 번호 뽑아내기

let regex = /(02|01(0|1|6|7|8|9))-[0-9]{3,4}-[0-9]{4}/g;
console.log(str.match(regex));

// [ '010-1234-5678', '02-1234-5678' ]

  • () => 표현해야할 하나의 그룹을 뜻함

  • | => 논리연산자(or), 02 또는 01을 뜻함. 01다음에 오는 숫자들을 그룹으로 묶어 해당 조건중 true인 것을 반환.

  • [] => 문자 집합을 나타내는것에 사용, 집합안에 있는 문자중 하나와 일치하는것을 의미

  • {} => 반복 횟수를 지정하는것에 사용한다. {3,4} 패턴이 3번또는 4번 반복될수가 있다. 즉 숫자가 3자리 이거나 4자리다.

 

 

2. 특수 문자 뽑아내기

let regex = /[^\d\w\s]/gi;
console.log(str.match(regex).join(""));

// ,'..----.,!!,.@.!?**^^.

  • [] => 문자 집합을 나타내는것에 사용, 집합안에 있는 문자중 하나와 일치하는것을 의미

  • /[^\d\w\s]/gi => 숫자와(\d) 단어 문자와(\w) 공백문자가(\s) 아닌(^) 문자열을 반환. 즉, 특수문자를 뜻함.

 

 

3. 이메일 뽑아내기

let regex = /[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]+/gi;
console.log(str.match(regex));

  • [a-zA-Z0-9] => 대문자, 소문자, 숫자로 이루어진 패턴

  • + => 한번이상 반복, 즉 위 패턴이 한번이상 반복되는것을 찾는다.

  • \. => .만 단독으로 쓴다면 문자하나를 임의로 나타내는 메타 문자이므로 \.이렇게 이스케이프 함으로써 문자 . 을 의미함.