Javascript - 자주 사용하는 정규 표현식을 예제 코드로 알아보자
- 프로그래밍/자바스크립트
- 2022. 2. 24.
프로그래밍에서 정규 표현식을 잘 사용하면 보다 간단하게 문제들을 해결할 수 있습니다. 대표적으로는 공백, 숫자, 한글과 같은 문자 유효성 검증을 이야기할 수 있겠네요. 정규 표현식(regular expression)을 사용하면 if문을 사용하지 않는 검증을 만들 수 있을 뿐만 아니라 코드의 가독성도 높일 수 있고 문자 탐색에서도 이점을 가질 수가 있습니다.
오늘은 자바스크립트를 이용해 유효성을 검증하는 정규표현식에 대해서 알아보겠습니다. 유효성 검증의 경우 대표적으로 사용하는 사례는 공백 확인, 영문자 혹은 한글 확인과 같이 사용자의 입력 값을 확인하는 경우입니다.
그럼 예제 코드를 통해서 정규 표현식에 대해 알아보겠습니다. 이 글에 예제 코드로 작성한 유효성 검증 코드는 공백 확인, 숫자 확인, 영문자 확인, 이메일 양식 확인, 전화번호 양식 확인, 핸드폰 번호 양식 확인, 주민등록번호 양식 확인, 우편 번호 양식 확인입니다.
공백 확인
const CHECK_SPACE = /\s+/;
console.log(CHECK_SPACE.test(' '));
console.log(CHECK_SPACE.test('1 '));
console.log(CHECK_SPACE.test(' a'));
console.log(CHECK_SPACE.test(' 1 a '));
숫자 확인
const ONLY_NUMBER = /^[0-9]*$/;
console.log(ONLY_NUMBER.test('123456789'));
영문자 확인
const ONLY_ENGLISH = /^[a-zA-Z]*$/;
console.log(ONLY_ENGLISH.test('a'));
console.log(ONLY_ENGLISH.test('aA'));
이메일 양식 확인
const EMAIL_CHECK = /\w+@\w+\.\w+(\.\w+)?/;
console.log(EMAIL_CHECK.test('test@google.com'));
전화번호 양식 확인
const TEL_NUMBERS_CHECK = /^\d{2,3}-\d{3,4}-\d{4}$/;
console.log(TEL_NUMBERS_CHECK.test('02-123-1234'));
console.log(TEL_NUMBERS_CHECK.test('031-123-1234'));
console.log(TEL_NUMBERS_CHECK.test('02-1234-1234'));
console.log(TEL_NUMBERS_CHECK.test('031-1234-1234'));
핸드폰 번호 양식 확인
const PHONE_NUMBERS_CHECK = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
console.log(PHONE_NUMBERS_CHECK.test('010-1234-1234'));
console.log(PHONE_NUMBERS_CHECK.test('011-123-1234'));
console.log(PHONE_NUMBERS_CHECK.test('016-123-1234'));
console.log(PHONE_NUMBERS_CHECK.test('017-123-1234'));
console.log(PHONE_NUMBERS_CHECK.test('018-123-1234'));
console.log(PHONE_NUMBERS_CHECK.test('019-123-1234'));
주민등록번호 양식 확인
const IDENTITY_CHECK = /\d{6}\-[1-4]\d{6}/;
console.log(IDENTITY_CHECK.test('220101-4123456'));
우편번호 양식 확인
const POSTAL_CODE_CHECK = /^\d{3}-\d{2}$/;
console.log(POSTAL_CODE_CHECK.test('123-12'));
위에서 사용한 정규식 예제 코드는 첨부파일로도 제공합니다. 필요하신 분은 첨부파일을 다운로드해서 사용하세요.
끝맺음
이 글에서 예제로 작성한 정규식은 간단한 활용 예제일 뿐 정규식을 이용해서 만들 수 있는 검증 코드는 무궁무진합니다. 만약 정규식을 활용하는 게 어렵다면 정규식을 만들고 확인할 수 있는 RegexLearn과 같은 사이트를 사용해보시기를 추천드립니다.
반응형
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
Javascript - Array groupBy() 함수 사용법 (1) | 2022.03.22 |
---|---|
Javascript - JSON 객체를 확인하는 stringify() 사용 방법을 알아보자 (1) | 2022.03.11 |
Javascript - 만들면서 배우는 map 함수의 정의와 사용 방법 (1) | 2022.01.27 |
Javascript - 고차 함수(Higher-Order Function)란 무엇일까? (0) | 2022.01.26 |
Javascript - 만들면서 배우는 filter 함수의 정의와 사용 방법 (0) | 2022.01.25 |