정규표현식이란 "문자열 검사식"이다.
일일이 문자열을 검사하기에는 에너지 낭비가 너무 심하다.
ex)8~20자 이내이며, 영문 소문자와 숫자로만 구성된 아이디를 검사한다면,
https://regexper.com 사이트를 들어가보자.
예를 들어 휴대전화번호 모양을 예시로 들어보자.
첫번째 자리 0
두번째자리 1
세번째자리 0/1/6/7/8/9 중 하나
네번째자리 -
다섯번재자리 1~9중 하나
여섯번째자리 0~9중 하나
일곱번째자리 0~9중 하나
여덟번째자리 0~9중 하나
아홉번째자리 -
열번째자리 0~9중 하나
열한번째자리 0~9중 하나
열두번째자리 0~9중 하나
열세번째자리 0~9중 하나
끝
홈페이지를 보면 입력 칸이있다.
^는 시작
$는 끝
[]는 one of라는 의미이다. 휴대폰 번호를 예로 들자면
^01[016789]-[123456789][0123456789][0123456789][0123456789]-[0123456789][0123456789][0123456789][0123456789]$
이렇게 시작(^)부터 끝($)까지 검사를 하게 만들 수 있다.
아이디, 비밀번호, 닉네임, 전화번호, 카드번호, 생년월일, 홈페이지주소 등 검사가 필요한 부분은 이렇게 만들어 진행하면 된다. 이러한 검사들을 할 수 있게 만들수 있도록 식을 만드는것을 '정규 표현식'이라고 한다.
참고로 띄어쓰기는 절대 하지 않아야한다. 식이 완전 달라진다.
한 번
<script>
function checkBirth(){
//미리 만들어둔 전화번호 검사식으로 전화번호 입력값을 검사하도록 구현
//준비물 : 검사식(regex), 입력태그(input), 출력태그(span)
//정규표현식 검사명령 : regex.test() --> boolean
//정규표현식은 만들때 슬래시(/)로 감싸서 만든다.
var regex=/^01[016789]-[123456789][0123456789][0123456789][0123456789]-[0123456789][0123456789][0123456789][0123456789]$/;
var phoneInput = document.querySelector("input[name=phone]");
var phoneSpan = document.querySelector("input[name=phone]+span");
if(regex.test(phoneInput.value)){
phoneSpan.textContent="올바른 전화번호 형식입니다";
}
else{
phoneSpan.textContent="잘못된 전화번호 형식입니다";
}
}
</script>
</head>
<body>
<input type="text" name="phone" placeholder="전화번호" oninput="checkBirth();">
<span></span>
</body>
</html>
이러한 식이 나오게된다.
이제부터는 ^01[016789]-[123456789][0123456789][0123456789][0123456789]-[0123456789][0123456789][0123456789][0123456789]$ 식을 줄여보도록 해보자.
^01[016-9]-[1-9][0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]$ 로 줄일 수 있다. (-)는 되고 (~)는 안된다.
^01[016-9]-[1-9][0-9]{3}-[0-9]{4}$ 로 더욱 줄일 수 있다.
[ ]를 n개의 개수가 뒤에 반복된다면 곱하기 개념으로 이해하면 된다.
또한 (-)는 전화번호에 입력에 있어서 있어도 되는경우 없어도 되는 경우가 있는데
무조건 있어야한다면 위와같이 하면되고, 없어도 되면 빼기모양을 빼면 그만이다.
하지만 있어도 없어도 되게 만들려면 -뒤에?를 넣어서 -? 를 넣으면된다.
^01[016-9]-?[1-9][0-9]{3}-?[0-9]{4}$ 와 같이 말이다.
1부터 0은 안된다. 0부터 9는 가능하다. 그 이유는 ASCII코드에 의해, 0=48, 1=49이기에 역으로 가는것은 안된다. 때문에 0~9로 가는 식으로 이해하자.
추가로, 빼기가 두개 다 있거나 아예 없는 경우로 한다면 |를 이용하여 다음과 같이 만들 수 있다.
^((01[016-9][1-9][0-9]{3}[0-9]{4}$)|(^01[016-9]-[1-9][0-9]{3}-[0-9]{4}))$
'JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT#08] input이벤트, onblur이벤트 (0) | 2020.12.23 |
|---|---|
| [JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용 (0) | 2020.12.23 |
| [JAVASCRIPT#06]비밀번호 검사 (0) | 2020.12.23 |
| [JAVASCRIPT#05] 글자 복사 함수 (0) | 2020.12.22 |
| [JAVASCRIPT#04] 자바스크립트 함수, 함수 활용(태그제어) (0) | 2020.12.22 |