정규식

정규식이란 문자를 검사하고 싶을 때 사용하는 식이다. 대표적으로 이메일이나 비밀번호를 입력할 때 몇 자리 이상 혹은 대문자 소문자 이렇게 문자들을 검사할 때 사용한다.

 

문자를 검사할 때 includes를 사용할 수 있는데,

'abc'.includes('a')

위 처럼, 사용하면 abc에 a라는 글자가 있냐 true, false로 알 수 있다. 하지만, 한글이 들어있나 영어가 들어있나 이렇게 구체적인 검사는 할 수 없다. 따라서 test란 함수와 정규식을 사용해서 검사한다.

 

기본적으로 정규식은

/abc/

이렇게 슬래시 기호를 사용한다. 그리곤 test라는 함수로 이 문장에 abc라는 단어가 있나요 하고 물어볼 수 있다.

/abc/.test('abcdef')

이렇게 사용하면 abcdef라는 문장에 abc가 있냐? 이러고 물어보는 식이 된다. 있으므로 true를 반환하게 된다.

 

이제 정규식에 대해 간단하게 알아보자.

/ab/

단순하게 글자에 ab가 있냐 없냐 물어본다.

/[A-D]/
/[가-하]/
/[a-zA-Z]/ //아무알파벳 1개

대괄호와 대시(-)를 사용하면 범위를 나타낸다 A부터 D까지의 글자가 있냐? 한글도 가 부터 하까지 있냐? 이러고 물어볼 수 있다.

/\S/

역슬래시와 S를 같이 쓰면 특수문자 포함한 모든 문자를 찾아달라이다.

모든 문자 다음에 골뱅이가 오는 것을 검사하고 싶으면

/\S@/

이런 식으로, 써주면 된다.

/\S+/

위처럼 써주면 모든 문자 하나만 찾지 않고 뒤로 더 찾아주세요 라는 뜻이다. 

/^a/

^를 사용하면 a로 시작하냐를 묻는 뜻이다.

/a$/

뒤에 $를 붙여주면 a로 끝나냐도 검사할 수 있다.

그리고 ()를 사용해서 먼저 검사나, | 을 사용해서 or의 역할이나 &로 and의 역할을 할 수 있다.

 

따라서 간단하게 이메일 정규식을 만들어보면,

/\S+@\S+\.\S+/

fafsd12@naver.com 이런 식인 정규식을 찾아주세요 라는 뜻이 된다. .(마침표)도 특수 문법이므로 역슬래시를 앞에 붙여서 써야 한다.

 

폼 전송시 이메일 검증을 해보자.

$('form').on('submit',function(e){

  var 입력한이메일 = $('#email').val();
  if ( /\S+@\S+\.\S+/.test(입력한이메일) == false ){
    e.preventDefault();
  }

});

이런 식으로, 사용하며 .form을 submit할 때, 우리가 입력한 이메일 값을 변수에 담아놓고, 만약 입력 이메일이 정규식에 맞게끔 글자가 없다면 false를 출력해 e.preventDefault()로 전송을 막아주는 식이다.

 

만약, 길이 제한을 하려면 (소문자 8글자이하 (1에서8자리)) /[a-z]{1,8}/이런식으로 길이를 제한할 수 있다.

또는 대문자,소문자,숫자가 있는지 검사하려면 /[a-zA-Z0-9]/이런식으로 사용한다. 

범위가 광범위해서 찾아서 사용하는게 날 것 같다.