정규 표현식은 특정 키워드를 이용해서 문자열의 데이터를 검사해준다.
대표적인 예로는 웹사이트 가입 시 Id 를 올바르게 입력했는지 이름은 잘 입력했는지 검사해준다.
regExp라는 키워드를 사용한다.
var regExp = new regExp('규칙내용');
이나 간단하게
var regExp = /규칙내용/;
위와 같이 선언하여
메소드 test, exec
그리고 String 메소드와 함께 match, replace, search, split 등이 있다.
test() : 규칙에 해당하면 true 반환
exec() : 실행
이 외에도 해당 글자를 바꾸는 대체문자와 검사 범위를 설정하는 플래그 문자
그리고 문자열의 앞과 뒤를 구분하는 표현식, 특정 문자를 검출하는 메타문자, 수량문자 등이 있다.
다음 예를 통해 쓰임을 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.area {
border:1px solid black;
height:150px;
background:lightgray;
}
</style>
</head>
<body>
<h1>정규표현식</h1>
<h3>정규표현식 객체 생성</h3>
<button onclick="test1()">확인하기</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test1() {
// 정규표현식은 일반적으로 회원가입 시 암호가 간단하지 않고 적절한지 판별할 때 사용
// 정규식 변수를 선언한다.
// var regExp = new RegExp("script");
var regExp = /script/; // 이와같이 간단하게 사용 가능
var str = "javascript jquery ajax";
// 메소드를 사용한다.
var area1 = document.getElementById("area1");
area1.innerHTML += "test()함수 사용 : " + regExp.test(str) + "<br>";
area1.innerHTML += "exec()함수 사용 : " + regExp.exec(str) + "<br>";
// String 메소드 사용도 많이 한다.
area1.innerHTML += "match()함수 사용 : " + str.match(regExp) + "<br>";
// 해당 글자를 바꿔줌
area1.innerHTML += "replace()함수 사용 : " + str.replace(regExp, "스크립트") + "<br>";
// 글자가 몇번째에 존재하는지
area1.innerHTML += "search()함수 사용 : " + str.search(regExp) + "<br>";
// 우리에게 익숙한 split
area1.innerHTML += "split()함수 사용 : " + str.split(regExp) + "<br>";
}
</script>
<hr>
<h3>대체문자</h3>
<p>정규표현식을 사용하면 문자열 객체의 replace()메소드를 사용할 때
대체문자를 사용할 수 있다.</p>
<button onclick="test2()">실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test2() {
var regExp = /a/;
var str = "javascript jquery ajax";
//일치하는 문자열
//var output = str.replace(regExp, '($&)');
//일치하는 부분의 앞부분 문자열
//var output = str.replace(regExp, '($`)');
//일치하는 부분의 뒷 부분 문자열
var output = str.replace(regExp, "($')");
alert(output);
}
</script>
<h3>플래그 문자</h3>
<p>
g(global) : 전역 비교를 수행한다.<br>
i(ignoreCase) : 대소문자를 가리지 않고 비교한다.<br>
m(multiLine) : 여러줄의 검사를 수행한다.<br>
</p>
<button onclick="test3()">실행확인</button>
<div id="area3" class="area"></div>
<script type="text/javascript">
function test3() {
var regExp = /a/ig;
var str = "JavaScript JQuery Ajax";
var area3 = document.getElementById("area3");
area3.innerHTML += str.replace(regExp, "($&)");
}
</script>
<h3>앵커문자</h3>
<p>문자열의 앞과 뒤를 구분해주는 정규표션식 기호</p>
<button onclick="test4()">실행확인</button>
<div id="area4" class="area"></div>
<script type="text/javascript">
function test4() {
// '^'표시는 ~~로 시작하는 의 의미
var regExp = /^j/gim;
var str = "JavaScript\nJQuery\nAjax";
var area4 = document.getElementById("area4");
area4.innerHTML += "^ABC : " + str.replace(regExp, '($&)') + "<br>";
var regExp2 = /ipt&/gim;
area4.innerHTML += "ABC$ : " + str.replace(regExp, '($&)') + "<br>";
}
</script>
<h3>메타문자</h3>
<p>자바스크립트 정규 표현식 객체가 갖는 가장 유용한 기능이다.</p>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area"></div>
<script type="text/javascript">
function test5() {
var regExp1 = /[aj]/ig;
var regExp2 = /[^aj]/ig;
var regExp3 = /[a-z]/ig; // 알파벳인지
var str = "JavaScript JQuery Ajax";
var area5 = document.getElementById("area5");
area5.innerHTML += "[aj] : " + str.replace(regExp1, "($&)") + "<br>";
area5.innerHTML += "[^aj] : " + str.replace(regExp2, "($&)") + "<br>";
area5.innerHTML += "[a-z] : " + str.replace(regExp3, "($&)") + "<br>";
var regExp4 = /[0-9]/g; // 숫자인지
var regExp5 = /[가-힣]/g; // 한글인지
var str2 = "123JavaScript안녕하세요"
area5.innerHTML += "[0-9] : " + str2.replace(regExp4, "($&)") + "<br>";
area5.innerHTML += "[가-힣] : " + str2.replace(regExp5, "($&)") + "<br>";
}
</script>
<hr>
<h3>메타문자를 이용한 주민번호 확인</h3>
<label>주민번호 입력 : </label>
<input type="text" id="pno">
<button onclick="test6();">실행확인</button>
<div id="area6" class="aera"></div>
<script type="text/javascript">
function test6() {
var regExp = /......-......./; // 점은 자리를 의미, 해당 열은 6번째 이후 '-'가 들어오나 안오나를 체크
// 만약 . 점을 구분하고 싶을 땐 \를 사용 아래에서 설명
var pno = document.getElementById("pno").value;
if (regExp.test(pno)) {
alert("정상입력");
}else {
alert("잘못입력");
}
}
</script>
<hr>
<h3>추가 메타 문자</h3>
<p>\d : 숫자<br>
\w : 아무 단어<br>
\s : 공백문자(탭, 띄어쓰기, 줄바꿈)<br>
\D : 숫자 아님<br>
\W : 아무 단어 아님<br>
\S : 공백문자가 아님</p>
<label>주민번호 입력 : </label>
<input type="text" id="pno2">
<button onclick="test7()">실행확인</button>
<div id="area7" class="area"></div>
<script type="text/javascript">
function test7() {
var regExp = /\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/; // 앞 6자리는 숫자, 뒷자리 맨 앞에는 1234 안에서 입력하고 뒷 6자리 숫자 한다.
var pno = document.getElementById("pno2").value;
if (regExp.test(pno)) {
alert("정상입력");
}else {
alert("잘못입력");
}
}
</script>
<h3>수량문자</h3>
<p>
a+ : a가 적어도 1개 이상<br>
a* : a가 0개 또는 여러개<br>
a? : a가 0개 또는 1개<br>
a{5} : a가 5개<br>
a{2,5} : a가 2~5개<br>
a{2,} : a가 2개 이상<br>
a{,5} : a가 5개 이하<br>
</p>
<label>주민번호 입력 : </label>
<input type="text" id="pno3">
<button onclick="test8();">실행확인</button>
<div id="area8" class="area"></div>
<script type="text/javascript">
function test8() {
var regExp = /\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[01])-[1234]\d{6}/; // | 는 or 연산
// 숫자는 2자리가 온다, 첫번째 ()의 의미는 01~12까지 올 수 있다이고, 두번째 ()는 01~31까지 올 수 있다는 표현
// 뒤의 [1234]\d{6}은 주민번호 뒷자리를 의미
var pno = document.getElementById("pno3").value;
if (regExp.test(pno)) {
alert("정상입력");
}else {
alert("잘못입력");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원가입 유효성 체크</h1>
<form action="" method="post" onsubmit="return validate();"> <!-- 제출시 행동 -->
<label for="userid">* 유저아이디</label>
<input type="text" name="userid" id="userid"><br>
<label for="pass">* 비밀번호</label>
<input type="password" name="pass" id="pass"><br>
<label for="pass1">* 확인</label>
<input type="password" name="pass1" id="pass1"><br>
<label for="name">* 이름</label>
<input type="text" name="name" id="name"><br>
<label for="email">* 이메일</label>
<input type="text" name="email" id="email"><br>
<label for="tel1">전화번호</label>
<input type="text" name="tel1" id="tel1" size="3" maxlength="3">-
<input type="text" name="tel2" id="tel2" size="3" maxlength="4">-
<input type="text" name="tel3" id="tel3" size="3" maxlength="4">
<br><br>
<label for="job">직업</label>
<select name="job" id="job">
<option>개발자</option>
<option>프로그래머</option>
<option>자영업자</option>
</select><br>
<label>성별</label>
<input type="radio" name="gender" value="m"> 남
<input type="radio" name="gender" value="f"> 여<br>
<label for="hobby">취미</label>
<input type="checkbox" name="hobby" value="reading"> 독서
<input type="checkbox" name="hobby" value="drama"> 드라마보기
<input type="checkbox" name="hobby" value="soccer"> 축구<br>
<input type="checkbox" name="hobby" value="movie"> 영화보기
<input type="checkbox" name="hobby" value="basket"> 드라마보기
<input type="checkbox" name="hobby" value="game"> 게임<br>
<input type="reset" value="리셋">
<input type="submit" value="완료">
</form>
<script>
var userId = document.getElementById("userid");
var pass = document.getElementById("pass");
var pass1 = document.getElementById("pass1");
var name1 = document.getElementById("name");
var email = document.getElementById("email");
var tel1 = document.getElementById("tel1");
var tel2 = document.getElementById("tel2");
var tel3 = document.getElementById("tel3");
var job = document.getElementById("job");
var gender = document.getElementsByName("gender");
var hobby = document.getElementsByName("hobby");
function validate() {
var regExp;
//이메일 검사(adfg@dfds.dsf)
//4글자 이상이 나오고
//@가 나오고 1글자 이상 주소 . 글자 1~3
regExp = /@/;
console.log(email.value)
if(regExp.test(email.value)){
console.log("@포함");
var emailTemp = email.value.split('@');
console.log(emailTemp[0].length)
if(emailTemp[0].length >= 4){
console.log("이메일id 4글자 이상 체크");
var emailCheck = emailTemp[1].split('.');
console.log(emailCheck[0].length)
if(emailCheck[0].length >= 1){
console.log("이메일 주소 1글자 이상 체크");
console.log(emailCheck[1].length)
if(emailCheck[1].length <= 3 && emailCheck[1].length >= 1){
console.log("이메일 주소.뒤 1~3 체크 \n이메일 체크");
}else {
alert("E-mail을 확인하세요!");
email.select();
return false;
}
}else {
alert("E-mail을 확인하세요!");
email.select();
return false;
}
}else {
alert("E-mail을 확인하세요!");
email.select();
return false;
}
}else {
alert("E-mail을 확인하세요!");
email.select();
return false;
}
//아이디 검사
//첫글자는 반드시 영문 소문자, 총 4~12자로 이루어지고
//숫자가 반드시 하나 이상 포함되어야 함
//영문 소문자와 숫자로 이루어져야 한다.
regExp = /[a-z]/;
var regExp2 = /[0-9]/;
console.log(regExp.test(userId.value.charAt(0)));
if(regExp.test(userId.value.charAt(0))){
console.log("첫글자 소문자");
console.log(userId.value.length >= 4 && userId.value.length <= 12);
if(userId.value.length >= 4 && userId.value.length <= 12){
console.log("4~12자 체크")
console.log(regExp2.test(userId.value));
if(regExp2.test(userId.value)){
console.log("숫자 하나 체크");
var idtemp = userId.value.replace(regExp2, ""); // 숫자 필터
console.log(idtemp);
regExp = /[A-Z]/;
if(regExp.test(idtemp)){
alert("ID에 대문자는 사용 할 수 없어요!");
userId.select();
return false;
}else {
console.log("소문자 체크");
console.log("ID 체크");
}
}else {
alert("숫자를 꼭 포함한 ID이어야 합니다.");
userId.select();
return false;
}
}else {
alert("ID는 4~12자 이내로 입력해주세요.");
userId.select();
return false;
}
}else {
alert("첫 글자는 소문자이어야 합니다.");
userId.select();
return false;
}
//비밀번호 확인 검사
//비밀번호와 비밀번호 확인 값이 일치
if(pass.value == pass1.value){
console.log("비밀번호 확인을 올바르게 했습니다!");
}else {
alert("비밀번호를 다시 한번 확인해 주세요.");
return false;
}
//이름 검사
//2글자 이상, 한글만
console.log(name1.value);
console.log(name1.value.length);
if(name1.value.length >= 2){
console.log("두 글자 이상 확인");
var korCheck = true;
regExp = /^[가-힣]+$/;
for (var i = 0; i < name1.value.length; i++) {
if(regExp.test(name1.value.charAt(i))){ }
else{
alert(regExp.test(name1.value.charAt(i)));
korCheck = false;
}
}
if (korCheck) {
console.log("한글 확인");
}else {
alert("이름은 한글만 입력해주세요!");
return false;
}
}else {
alert("이름은 두 글자 이상이어야 합니다!");
return false;
}
//전화번호 검사
//전화번호 앞자리는 2~3자리 숫자
//두번째자리는 3~4자리 숫자
//세번째 자리는 4자리 숫자
console.log("전화번호 체크");
regExp = /[0-9]{2,3}/;
console.log(regExp.test(tel1.value));
if(regExp.test(tel1.value)){
console.log("첫째 자리 체크");
regExp = /[0-9]{3,4}/;
if(regExp.test(tel2.value)){
console.log("첫째 자리 체크");
regExp = /[0-9]{4}/;
if(regExp.test(tel3.value)){
console.log("셋째 자리 체크");
console.log("전화번호 정상");
}else {
alert("전화번호 셋째 자리 오류!");
return false;
}
}else {
alert("전화번호 둘째 자리 오류!");
return false;
}
}else {
alert("전화번호 첫째 자리 오류!");
return false;
}
alert("가입을 환영합니다!");
}
</script>
</body>
</html>