1️⃣ 정규 표현식(Regular Expression)
특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어
정규 표현식을 이용하면 입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있다.
style 태그
<style>
.area{
width: 500px;
min-height: 300px; /* 최소 300px, 내용이 높이를 초과하면 자동으로 늘어남 */
border: 1px solid black;
}
.confirm{ color: green;}
.error{ color: red;}
</style>script 태그
외부 js 파일과 연결하는 태그
<script src="js/07_정규표현식.js"></script>// 정규 표현식 객체 생성 + 확인하기
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)); // true (str1 안에 script라는 문자가 있음)
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");
div1.innerHTML=""; //문자 삭제 (div 초기화)
// a(일반문자열) : 문자열 내에 a라는 문자열이 존재하는지 검색
const regExp1 = /a/;
div1.innerHTML += "/a/ , apple : " + regExp1.test("apple") + "<hr>"; // true
div1.innerHTML += "/a/ , price : " + regExp1.test("price") + "<hr>"; // false
// [abcd] : 문자열 내에 a,b,c,d 중 하나라도 일치하는 문자가 있는지 검색
const regExp2 = /[abcd]/;
div1.innerHTML += "/[abcd]/ , price : " + regExp2.test("apple") + "<hr>"; // true
div1.innerHTML += "/[abcd]/ , sub : " + regExp2.test("sub") + "<hr>"; // true
div1.innerHTML += "/[abcd]/ , qwert : " + regExp2.test("qwert") + "<hr>"; // false
// ^(캐럿) : 문자열의 시작 의미
const regExp3 = /^group/; // 문자열의 시작이 "group"인지 확인
div1.innerHTML += "/^group/ , group100 : " + regExp3.test("group100") + "<hr>"; // true
div1.innerHTML += "/^group/ , 100group : " + regExp3.test("100group") + "<hr>"; // false
// $(달러) : 문자열의 끝을 의미
const regExp4 = /group$/; // 문자열의 끝이 group 인자 확인
div1.innerHTML += "/group$/, group100 : " + regExp4.test("group100") + "<hr>"; // false
div1.innerHTML += "/group$/, 100group : " + regExp4.test("100group") + "<hr>"; // true
})
// 이름 유효성 검사
document.getElementById("inputName").addEventListener("keyup", function(){
// 결과 출력용 span
const span = document.getElementById('inputNameResult');
// 한글 2~5글자 정규 표현식(정규식)
// [가-힣] : 한글(단일 자음, 모음 제외)
const regExp = /^[가-힣]{2,5}$/;
// 유효성 검사
if(regExp.test(this.value)){
// #inputName에 작성된 값이 유효한 경우
span.innerHTML="유효한 이름 형식입니다.";
span.style.color="green";
span.style.fontWeight="bold";
} else {
span.innerHTML="이름 형식이 유효하지 않습니다.";
span.style.color="red";
span.style.fontWeight="bold";
}
// 빈칸인지 검사
// 빈칸이라면 span에 작성된 내용 초기화(삭제)
// (-> 이름을 쓰고 지웠을 때처럼 보여야 함)
/* if(this.value == ""){
span.innerHTML="";
} */
if(this.value.length == 0){
span.innerHTML="";
}
// 주민등록번호 유효성 검사
document.getElementById("inputPno").addEventListener("keyup", function(){
const span = document.getElementById("inputPnoResult");
// 주민등록번호 정규식
// 생년월일(6)-고유번호(7)
// const regExp = /^\d{6}\-\d{7}$/;
// 연도(2) 월(2) 일(2)
// 업그레이드
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[0-9]
// 20 ~ 29 -> 2[0-9]
// 30 ~ 31 -> 3[0-1]
// (0[1-9]|1[0-9]|2[0-9]|3[0-1])
// 유효성 검사
if(regExp.test(this.value)){
span.innerText = "유효한 주민등록번호 형식입니다."
span.classList.remove("error"); // error 클래스 제거
span.classList.add("confirm"); // confirm 클래스 추가
// span.classList.toggle("confirm");
} else{
span.innerText = "주민등록번호 형식이 유효하지 않습니다."
span.classList.remove("confirm"); // confirm 클래스 제거
span.classList.add("error"); // error 클래스 추가
}
if(this.value.trim().length == 0){
span.innerText = "";
}
})
})
/* 이메일 유효성 검사, 비번 유휴성 검사 해보기 */정규 표현식 참고 사이트
<h3>정규 표현식 참고 사이트</h3>
<ul>
<li><a href="https://regexper.com/" target="_blank">작성한 정규표현식을 그림으로 나타내주는 사이트</a></li>
<li><a href="https://regexr.com/" target="_blank">정규표현식 테스트 사이트</a></li>
<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>
2️⃣ 정규 표현식 객체 생성 및 확인하기
-
정규 표현식 객체 생성 방법
(1) const regExp = new RegExp("정규표현식");
(2) const regExp = /정규표현식/;
→ 양쪽 '/' 기호 정규 표현식의 리터럴 표기법 -
문자열 패턴 확인 메소드(함수)
(1) regExp.test(문자열)
→ 문자열에 정규표현식과 일치하는 패턴이 있을 경우 true. 없으면 false
(2) regExp.exec(문자열)
→ 문자열에 정규표현식과 일치하는 패턴이 있을 경우 처음에 매칭되는 문자열 반환 없으면 null 반환
<button id="check1">확인하기</button>
3️⃣ 정규 표현식의 메타 문자
문자열의 패턴을 나타내는 문자열 문자마다 지정된 특별한 뜻이 담겨있다.
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칸 (개행문자를 제외한 문자 하나)
<button id="btn1">확인하기</button>
<div id="div1" class="area"></div>
4️⃣ 클래스 관련 함수
이름 유효성 검사
<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>
전체코드
<!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://regexper.com/" target="_blank">작성한 정규표현식을 그림으로 나타내주는 사이트</a></li>
<li><a href="https://regexr.com/" target="_blank">정규표현식 테스트 사이트</a></li>
<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>
<hr>
<h3>주민등록번호 유효성 검사</h3>
주민등록번호 : <input type="text" id="inputPno"> <br>
<span id="inputPnoResult">주민등록번호를 작성해주세요.</span>
<script src="js/07_정규표현식.js"></script>
</body>
</html>
Hello! My Name is oYJo