지난 시간 복습
정규 표현식
정규표현식 : Regular Expression, 정규식 또는 RegExp
프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Expression</title>
</head>
<body>
<script>
var str="$12$ \-\ $25$";;
var exp=/\$/;
var rb=str.match(exp);
if(rb){
alert(rb);
} else {
alert(rb);
}
</script>
</body>
</html>
$12$ \-\ $25$라는 문자열에서 '$' 와 매치해서 알림으로 보여주는 표현
'.' 은 아무 글자 를 의미함.
'.' 1개를 찾으면 처음부터 1글자를 의미
'.$' 는 맨뒤의 1글자를 의미
'.' 은 '.' 이라는 문자를 의미 ('\' 를 사용해서 문자 그대로를 의미)
'[ ]' 사이의 문자는 or 로 연결되어 각각의 문자를 포함한 경우를 찾는다.
'[dH].' 이기 때문에 'd.' or 'H.' 인 문자열을 다 찾는다.
'-' 로 연결하면 a~b 까지를 모두 찾는다.
'^' 가 '[ ]' 안에 있으면 not의 의미, '^' 뒤의 문자를 제외한 문자를 다 찾는다.
'( )' 안의 문자열을 그대로 인식해서 찾고, '|' 는 or 의 의미
'*' : 패턴이 일치하지 않거나 한번 이상 반복할때 일치한다.
-> 0 개나 1 개 이상
'+' : 패턴이 한번 이상 반복할 때 일치한다.
-> 1 개 이상
'?' : 패턴이 일치하지 않거나 한번만 반복할 때 일치한다.
-> 0 개나 1 개
수량자는 앞의 문자를 제한함
수량자에서 숫자로 표현, n개 이상 찾기
각각의 '*', '+', '?' 를 이용한 결과와 '{n,m}' 을 이용한 결과가 같음
수량자 뒤에 '?' 가 붙게되면 그 수량자의 최소값과 매칭이 된다.
'\w' 는 영문자, 숫자, '_' 를 의미한다. 공백이나 다른 특수문자는 표현하지 않는다.
'\W' 는 정반대, 영문자, 숫자, '_' 를 제외한 문자를 의미한다.
'\s' 는 공백, '\S' 는 공백을 제외한 모든 문자 를 의미한다.
'\d' 는 숫자 ( digit ), '\D' 는 숫자를 제외한 모든 문자를 의미한다.
'\b' 는 문자열 경계의 문자를 의미한다.
위의 정규식을 이용해서 비정상적인 이메일이나 비정상적인 비밀번호를 걸러야 한다
일반적인 이메일 정규 표현식
정규식 시각화
복잡한 형태의 정규 표현식 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
id: <input type="text" id="id" size="10"> <br>
<button id="button1" onclick="checkId();">검사</button>
<script>
function checkId(){
var s=document.getElementById("id").value;
var exp=/^[a-z]+[a-z0-9]{5,8}$/;
// 복잡한 형식의 아이디 정규표현식
// var exp=/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
alert(s.match(exp));
}
</script>
</body>
</html>
조건에 맞으면 id 반환
조건에 맞지 않으면 null 반환
alert(exp.test(s));로 변경하면 true/false 로 반환
그 boolean 값을 조건으로 if 문을 이용해 위처럼 만들 수도 있다.
select 명령어를 이용하면 textfield 에 내용 입력 후 버튼을 눌렀을 때 textfield 의 내용이 바로 선택이 된다. (다시 마우스로 클릭하지 않아도)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
전화 (-없이) : <input type="text" id="phone">
<input type="button"
onclick="checkNumber(document.getElementById('phone'),'숫자를 입력하시오')"
value="확인">
</form>
<script>
function checkNumber(elem,msg){
// var exp=/0~9까지 1개이상 숫자로 시작하고 끝나는 값 정규식으로 표현/;
var exp=/[0-9]+$/;
if(elem.value.match(exp)){
alert("굳");
return true;
}else{
alert(msg);
elem.value=""; // 내용 지우기
elem.focus();
return false;
}
}
</script>
</body>
</html>
맞으면 굳, 틀리면 숫자를 입력하시오 알림을 띄우고 틀리면 textfield 의 내용 지우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
E-Mail : <input type="text" id="email">
<input type="button"
onclick="checkEmail(document.getElementById('email'),'이메일 형식으로 입력하세요')"
value="확인">
</form>
<script>
function checkEmail(elem,msg){
var exp=/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
if(elem.value.match(exp)){
alert("통과");
return true;
}else{
alert(msg);
elem.value="";
elem.focus();
return false;
}
}
</script>
</body>
</html>
이메일 정규식을 이용해서 판별
미션
출력해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 회원가입 폼 만들기 -->
<!-- id, pw, email -->
<!-- 정규식으로 3개가 다 통과하는지 아닌지 메세지로 출력 -->
<!-- id : 5~6자리 -->
<!-- pw : 8~10자리 -->
<form action="">
ID : <input type="text" id="id" size="10"> <br>
PW : <input type="text" id="pw" size="10"> <br>
E-Mail : <input type="text" id="email" size="10"> <br>
<button id="signUpBtn"
onclick="signUp(document.getElementById('id'),
document.getElementById('pw'),
document.getElementById('email'));"
value="signup"
>Sign Up</button>
</form>
<script>
function signUp(elem1,elem2,elem3){
var exp1=/^[0-9a-zA-Z]{5,6}$/;
var exp2=/^[0-9a-zA-Z]{8,10}$/;
var exp3=/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
var isId=exp1.test(elem1.value);
var isPw=exp2.test(elem2.value);
var isEmail=exp3.test(elem3.value);
if(isId && isPw && isEmail){
alert("회원가입 완료!");
}else{
alert("ID,PW,E-Mail 중 틀린 곳을 확인하세요.");
}
}
</script>
</body>
</html>
미션 끝나면 JQuery 할 예정
'?' 를 이용해 수량자 제한을 하면 분절된 상태로 문자열을 잡는데 이를 게으른 수량자,
이를 제한하지 않고 전체를 다 잡는다면 탐욕적 수량자 라고 한다.
오전 수업 끝
