728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_정규표현식</title>
<style>
.area{
width: 500px;
min-height: 300px; /*최소 300px, 내용이 높이를 초과하면 자동으로 늘어남*/
border : 1px solid black;
}
.confirm{color:green;}
.error{color:red;}
</style>
</head>
<body>
<h1>정규 표현식(Regular Expression)</h1>
<pre>
특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어
정규표현식을 이용하면
입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한
조건문을 건단히 처리할 수 있다.
</pre>
<h3>정규 표현식 참고 사이트</h3>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D"
target="_blank">
MDN - 정규표현식 설명
</a></li>
</ul>
<hr>
<h1>정규 표현식 객체 생성 및 확인하기</h1>
<pre>
1. 정규 표현식 객체 생성 방법
1) const regExp = new RegExp("정규표현식")
2) const regExp = /정규표현식/;
-> 양쪽 '/' 기호 정규 표현식의 리터럴 표기법
2. 문자열 패턴 확인 메소드(함수)
1) regExp.test(문자열)
-> 문자열에 정규표현식과 일치하는 패턴이 있을경우 true, 없으면 false
2) regExp.exec(문자열)
-> 문자열에 정규표현식과 일치하는 패턴이 있을 경우
처음 매칭되는 문자열을 반환
없으면 null 반환
</pre>
<button id="check1">확인하기</button>
<hr>
<h1>정규 표현식의 메타 문자</h1>
<pre>
문자열의 패턴을 나타내는 문자열
문자마다 지정된 특별한 뜻이 담겨있다.
a (일반문자열) : 문자열 내에 a라는 문자열이 존재하는지 검색
[abcd] : 문자열 내에 a,b,c,d 중에 하나라도 일치하는 문자가 있는지 검색
^(캐럿) : 문자열의 시작을 의미
$(달러) : 문자열의 끝을 의미
\w (word, 단어) : 아무 글자 (단, 띄어쓰기, 특수문자, 한글 X)
\d (digit, 숫자) : 아무 숫자 (0~9 중 하나)
\s (space, 공간) : 아무 공백 문자 (띄어쓰기, 엔터, 탭 등)
[0-9] : 0부터 9까지 모든 숫자
[ㄱ-힣] : ㄱ부터 힣까지 모든 한글
[a-z] : 모든 영어 소문자
[A-Z] : 모든 영어 대문자
* 특수문자의 경우 각각을 입력하는 방법밖엔 없음
단, 메타문자와 중복되는 특수문자는
앞에 \(백슬래시)를 추가하여 탈출 문자(Escape)로 만들어 사용
* 수량 관련 메타 문자
a{5} : a문자가 5개 존재 == aaaaa
a{2,5} : a가 2개 이상 5개 이하 == aa, aaa, aaaa, aaaaa
a{2,} : a가 2개 이상
* : 0개 이상 == 0번 이상 반복 == 있어도 되고, 없어도 되고
+ : 1개 이상 == 1번 이상 반복
? : 0개 또는 1개
. : 1칸 (개행문자를 제외한 문자 하나)
</pre>
<button id="btn1">확인하기</button>
<div id="div1" class="area"></div>
<hr>
<h3>이름 유효성 검사</h3>
<h5>한글 2~5글자</h5>
이름 : <input type="text" id="inputName"><br>
<span id="inputNameResult"></span>
<h3>주민등록번호 유효성 검사</h3>
주문등록번호 :<input type="text" id="inputPno"><br>
<span id="inputPnoResult">"주민번호를 작성해주세요."</span>
<script src="js/07_정규표현식.js"></script>
</body>
</html>
// 정규 표현식 객체 생성 + 확인하기
document.getElementById("check1").addEventListener("click", function(){
//정규 표현식 객체 생성
const regExp1 = new RegExp("script");
// "script와 일치하는 문자열이 있는지 검사하는 정규 표현식"
const regExp2 = /java/;
// java와 일치하는 문자열이 있는지 검사하는 정규 표현식
//확인하기
const str1 = "저희는 지금 javascript 공부를 하고 있습니다.";
const str2 = "servlet/jsp(java server page)도 조만간 합니다.";
const str3 = "java java java";
console.log("regExp1.test(str1):"+ regExp1.test(str1));
console.log(regExp1.exec(str1));
console.log("regExp2.test(str2):"+ regExp2.test(str2));
console.log(regExp2.exec(str2));
// 일치하는게 없는 경우
console.log("regExp1.test(str2):"+ regExp1.test(str2));
console.log(regExp1.exec(str2));
//일치하는게 여러개 있을 경우
console.log("regExp2.test(str3):"+ regExp2.test(str3));
console.log(regExp2.exec(str3));
})
document.getElementById("btn1").addEventListener("click",function(){
const div1 = document.getElementById("div1");
//a(일반 문자열) : 문자열 내에서 a라는 문자열이 존재하는지 검색
const regExp1 = /a/;
div1.innerHTML = "/a/, apple : " + regExp1.test("apple") + "<hr>";
div1.innerHTML += "/a/, price : " + regExp1.test("price") + "<hr>";
//[abcd] : 문자열 내에 a,b,c,d 중에 하나라도 일치하는 문자가 있는지 검색
const regExp2 = /[abcd]/;
div1.innerHTML += "/[abcd]/, apple :" +regExp2.test("apple")+ "<hr>";
div1.innerHTML += "/[abcd]/, subway :" +regExp2.test("subwy")+ "<hr>";
div1.innerHTML +="/[abcd]/, qwer :" +regExp2.test("qwer")+ "<hr>";
//^(캐럿) : 문자열의 시작을 의미
const regExp3 = /^group/; //문자열의 시작이 "group"인지 확인
div1.innerHTML +="/^group/, group100 :" +regExp3.test("group100")+ "<hr>";
div1.innerHTML +="/^group/, 100group :" +regExp3.test("100group")+ "<hr>";
//$(달러) : 문자열의 끝을 의미
const regExp4 = /group$/; //문자열의 끝이 "group"인지 확인
div1.innerHTML +="/group$/, group100 :" +regExp4.test("group100")+ "<hr>";
div1.innerHTML +="/group$/, 100group :" +regExp4.test("100group")+ "<hr>";
})
// 이름 유효성 검사
document.getElementById("inputName").addEventListener("keyup",function(){
//결과 출력
const inputNameResult = document.getElementById("inputNameResult");
//한글 2~5글자 정규 표현식 (정규식)
const regExp = /^[가-힣]{2,5}$/;
//유효성 검사
if(regExp.test(this.value)){
inputNameResult.innerHTML= "유효한 이름 형식입니다.";
inputNameResult.style.color="green";
inputNameResult.style.fontWeight="bold";
//inputName에 작성된 값이 유효한 경우
//초록굵은글씨, 유효한 이름 형식 입니다.
}else {
inputNameResult.innerHTML="이름 형식이 유효하지 않습니다.";
inputNameResult.style.color="red";
inputNameResult.style.fontWeight="bold";
//빨간색 굵은 글씨, 이름 형식이 유효하지 않습니다.
}
//빈칸 검사
//빈칸이라면 span에 작성된 내용 초기화(삭제)
if(this.value.length==0){
inputNameResult.innerText="";
}
});
//주민등록번호 유효성 검사
document.getElementById("inputPno").addEventListener("keyup",function(){
const span = document.getElementById("inputPnoResult");
//주민등록번호 미작성인 경우
// -> 주민등록번호를 작성해주세요
if(this.value.length==0){
span.innerText="주민번호를 작성해주세요.";
span.classList.remove("error");
span.classList.remove("confirm");
return;//함수종료
}
//주민등록번호 정규식
// 생년월일(6)-고유번호(7)
//const regExp = /^\d{6}-[0-9]{7}$/;
// 업그레이드
const regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])-[1-4]\d{6}$/;
// () : 포획 괄호, 괄호 내부에 대응되는 부분을 찾아서 기억함
// | : 또는
//월
//01~09 -> 0[1-9]
//10~12 -> 1[0-2]
//(0[1-9] | 1[0-2]) : 괄호 내 | 기호를 기준으로 구분되며
// 0이 먼저 입력된 경우 다음 자리 1~9
// 1이 먼저 입력된 경우 다음자리 0~2
//일
//01~09 ->0[1-9]
//10~19 ->1[1-9]
//20~29 ->2[1-9]
//30~31 ->3[1-9]
// 요소.classList : 요소가 가지고 있는 클래스를 배열로 반환
// 요소.classList.add("클래스명") : 요소의 특정 클래스 추가
// 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거
//유효성검사
if(regExp.test(this.value)){
//유효한 경우
//유효한 주민등록번호 형식입니다.
span.innerText = "유효한 주민등록번호 형식입니다."
span.classList.add("confirm");//confirm 클래스 추가
span.classList.remove("error"); //error클래스제거
}else{
//아닌경우
//유효하지 않은 주민등록 형식입니다.
span.innerText = "유효하지 않은 주민등록 형식입니다."
span.classList.add("error"); //error 클래스 추가
}
})
728x90
반응형
'괴발개발 > js' 카테고리의 다른 글
| 배열 (0) | 2024.06.18 |
|---|---|
| 문자열 숫자형 변환 (0) | 2024.06.18 |
| 자바스크립트 js 이벤트 (0) | 2024.06.14 |
| 요소 접근 방법 (0) | 2024.06.13 |
| 데이터 입출력 (0) | 2024.06.13 |