정규표현식 (Regular Expression)
문자열의 특정 패턴을 찾을 수 있는 문법
패턴을 찾아서 추출, 삭제, 치환 등의 문자열 조작을 할 수 있음
우편번호 입력 (구/신)
123-456 또는 12345
형식의 우편번호를 입력받고 싶은경우
1 2 3 4 5 6 7 | "123-456".match(/\d{3}-\d{3}/)[0]; // 123-456 형식의 우편번호 입력받기 "12345".match(/\d{5}/)[0]; // 12345 형식의 우편번호 입력받기 "123-456".match(/(\d{3}-\d{3}|\d{5})/)[0]; // 123-456 또는 12345 형식의 우편번호 입력받기 "123-456".match(/(\d{3}-\d{3}|[0-8]\d{4})/)[0]; // 처음시작이 9가 아닌 우편번호 입력받기 | cs |
핸드폰번호 입력
010-1234-5678
010, 011, 017, 019로 시작해야하고 가운데번호는 3자리 또는 4자리가 와야한다
1 | "010-1234-5678".match(/01[0179]-\d{3,4}-\d{4}/)[0]; | cs |
알파벳 입력
4자리의 알파벳을 입력받아야함
대소문자 상관없음
1 | "abcd".match(/[a-zA-z]{4}/)[0]; | cs |
개발도구에서의 함수 선택
함수와 변수를 찾아서 선택함
1 2 3 4 5 6 7 8 9 10 11 12 | // 함수 찾기 // \(? : '(' 가 있어도 되고 없어도 됨 // \s+ : 1개 이상의 공백이 있음 \(?function\s+[a-zA-z_&]+ // 변수 찾기 // \s? : 공백이 있어도 되고 없어도 됨 // \s+ : 1개 이상의 공백이 있음 \s?(var|const|let)\s+[&_a-zA-z]+ | cs |
정규표현식을 이용하여 Form 유효성 검사
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Join !</title> </head> <body> <h1>Join my website!</h1> <div class="formWrap"> <form action="./join.html" method="post" id="myform"> <div class="inputWrap"> <div class="email"> <span> Email </span> <input type="text" name="email"> <br/> </div> <div class="password"> <span> Password </span> <input type="password" name="password"> <br/> </div> </div> <input class="sendbtn" type="submit"> </form> </div> <section class="result" style="color:red;"></section> <script> var sendbtn = document.querySelector(".sendbtn"); var result = document.querySelector(".result"); sendbtn.addEventListener("click",function(evt){ evt.preventDefault(); var emailValue = document.querySelector("[name='email']").value; var eValid = (/^[\w+_]\w+@\w+\.\w+/).test(emailValue); if(eValid){ result.innerHTML = "올바른 이메일 입니다!"; var myform = document.querySelector("#myform").submit(); }else{ result.innerHTML = "올바르지 않은 이메일 입니다!"; } }); </script> </body> </html> | cs |
'Dev > Javascript' 카테고리의 다른 글
| [JS] 생성자 패턴 (0) | 2018.09.03 |
|---|---|
| [JS] Handlebar 템플릿 라이브러리 (0) | 2018.08.22 |
| [JS] DOM 심화 (1) | 2018.07.11 |
| [JS] Javascript 배열, 객체 (0) | 2018.07.10 |
| [JS] Javascript 기초정리2 (0) | 2018.05.22 |
