자바스크립트 정규표현식 기초

정규 표현식은 주로 문자열 데이터가 있을 때 이 데이터가 현재 페이지에 적합한 용도로 사용이 되는지를

체크하는데에 매우 유용한 자바스크립트 기능이다. 주로 회원가입 페이지에서 자주 쓰이곤 한다.

 

/ [조건] /.test

/ 슬래시 사이에 조건을 넣어두고 test를 하면 true 혹은 false 값을 얻을 수 있다.

 

\w : 문자
\d : 숫자

그리고 \ 백슬래시에 w를 붙이면 문자, d를 붙이면 숫자가 된다. 하지만 // 슬래시 안에 그냥 넣어두면 순서와 상관없이 문자와 숫자만 있으면 true값을 출력하게 된다. 

 

순서가 필요하다면 /^ [조건] $/

^는 시작을 의미하고 $는 끝을 의미한다.

 

+: 1개 이상

. : 모든 문자 의미
\ : escape

\. : 문자열 점

\w{3} : 문자 3개
[0-9] : 0부터 9까지

[a-z] , [A-Z] : a부터 z까지

그 외에 +를 붙이면 1개 이상, 마침표 .은 모든 문자를 의미하는데 문자로 인식시키기 위해서는 escape인 \를 사용하여 \. 문자열 점을 조건에 추가할 수 있다. { }를 사용하면 사용할 수량을 제한할 수 있다. 범위를 지정할 수도 있는데 숫자는 [0-9]처럼 0에서 9까지, 문자는 [a-z] 혹은 [A-Z]로 활용할 수 있다.

 

/\w+@\w+.\w+/.test("aaa@bbb.com")
true

/^\w+$/.test("aaa@bbb.com")
false

/^\w+@\w+.\w+$/.test("aaa@bbb.com")
true

/^\w+@\w+\.\w+$/.test("aaa@bbb.com")
true

/^\w+@\w+\.\w+$/.test("aaa@bbb,com")
false

/^\d{3}-\d{4}-\d{4}$/.test("010-1234-5678")
true

/^010-\d{3,4}-\d{4}$/.test("010-1234-5678")
// 3개 또는 4개
true

위 코드블록은 이메일과 휴대폰번호를 정규표현식으로 검증해보고 출력한 값이다.

 

이 외에도 정규표현식에 여러 가지가 있는데 MDN 문서를 더 활용할 필요가 있어 보인다. 가끔 프로그래머스에서도 정규표현식으로 문제를 풀 수 있는 경우도 많아 배워두면 쓰임새가 많아 보인다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN