📝 계산기만들기, 이벤트, 정규표현식 후 세미프로젝트 작업
#230224
📌 정규 표현식(Regular Expression)
특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식 언어.
정규 표현식을 이용하면
입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한
조건문을 간단히 처리할 수 있다
✔️ 정규표현식 참고 사이트
1. 작성한 정규표현식을 그림으로 나타내주는 사이트
https://regexper.com/
2.정규표현식 테스트 사이트(실무에서 제일 많이 씀)
https://regexr.com/
3.정규표현식 설명 - MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
💻 regExr 홈페이지 보는법
빨간색 박스 안에 정규표현식을 작성
파란색 박스 안에 원하는 결과값을 작성
노란색 박스에서 맞는 정규표현식이면 match, 틀리면 No match로 표시됨.
🏷️정규 표현식 객체 생성 및 확인하기
1. 정규 표현식 객체 생성 방법
1) const regExp = new RegExp("정규표현식");
2) const regExp = /정규표현식/;
→`양쪽 '/' 기호 정규 표현식 리터럴 표기법
2. 문자열 패턴 확인 메서드(함수)
1) regExp.test(문자열)
→문자열에 정규표현식과 일치하는 패턴이 있을 경우 true, 없으면 false
2) regExp.exec(문자열)
→문자열에 정규 표현식과 일치하는 패턴이 있을경우
처음 매칭되는 문자열을 반환, 없으면 null 반환
<button id="check1">확인하기(콘솔)</button>
// 콘솔창에서 확인하기!
-----------------------------------------------------------
document.getElementById("check1").addEventListener("click", function() {
// 정규표현식 객체 생성
const regEx1 = new RegExp("script");
// "script"와 일치하는 문자열이 있는지 검사하는 정규식 객체
const regEx2 = /java/;
// "java"와 일치하는 문자열이 있는지 검사하는 정규식 객체
const str1 = "저희는 지금 javascript를 공부하고 있습니다.";
const str2 = "java, db, html, css, js 를 사용 중 입니다."
const str3 = "aaaaaajava, java, java";
// 확인하기
console.log("regEx1.test(str1) : " + regEx1.test(str1));
//정규표현식 에서 str1에 script라는 문자가 있어서 true라고 출력됨
console.log("regEx1.exec(str1) : " + regEx1.exec(str1));
// 정규표현식에서 str1에 script라는 처음매칭되는 문자열(script)을 반환
console.log("regEx1.test(str2) : " + regEx1.test(str2));
// script없어서 결과값 false
console.log("regEx1.exec(str2) : " + regEx1.exec(str2));
// script 없어서 결과값 null
console.log("regEx2.test(str2) : " + regEx2.test(str2));
//ture
console.log("regEx2.exec(str2) : " + regEx2.exec(str2));
//java
console.log("regEx2.test(str3) : " + regEx2.test(str3));
//ture
console.log("regEx2.exec(str3) : " + regEx2.exec(str3));
//java🏷️ 정규 표현식의 메타 문자
문자열의 패턴을 나타내는 문자
문자마다 지정된 특별한 뜻이 담겨있다.
✔️ 정규 표현식의 메타문자 종류
a(일반문자열) : 문자열 내에 a라는 문자열이 존재하는지 검색
(a말고 b,c,d 다 됨)
[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개 이상
a{,5} : a가 5개 이하
* : 0개 이상 == 0번 이상 반복 == 있어도 되고, 없어도 되고...
+ : 1개 이상 == 1번 이상 반복
? : 0개 또는 1개
. : 1칸 (개행문자 제외한 문자 하나)
<button id="check2">확인하기</button>
<div class="area" id="div1"></div>
-----------------------------------------------------------------
document.getElementById("check2").addEventListener("click", function() {
// 결과 출력용 div
const div1 = document.getElementById("div1");
//div1.innerHTML = "";
// [abcd] : 문자열 내에 a,b,c,d 중 하나라도 일치하는 문자가 있는지 검색
const regEx1 = /[abcd]/;
div1.innerHTML += "/[abcd]/ , apple : " + regEx1.test("apple") + "<hr>";
div1.innerHTML += "/[abcd]/ , apple : " + regEx1.test("apple") + "<hr>";
// ^(캐럿) : 문자열의 시작을 의미
const regEx2 = /^group/;
div1.innerHTML += "/^group/ , group100 : " + regEx2.test("group100") + "<hr>";
div1.innerHTML += "/^group/ , 100group : " + regEx2.test("100group") + "<hr>";
// ^[abcd] : 문자열이 a,b,c,d 중 하나로 시작하는지 검색
const regEx3 = /^[abcd]/;
div1.innerHTML += "/^[abcd]/ , group : " + regEx3.test("group") + "<hr>";
div1.innerHTML += "/^[abcd]/ , car : " + regEx3.test("car") + "<hr>";
div1.innerHTML += "/^[abcd]/ , dark : " + regEx3.test("dark") + "<hr>";
// $(달러) : 문자열의 끝을 의미
const regEx4 = /team$/;
div1.innerHTML += "/[team$]/ , A-team : " + regEx4.test("A-team") + "<hr>";
div1.innerHTML += "/[team$]/ , team-A : " + regEx4.test("A-team") + "<hr>";
//^[a-zA-Z0-9]$📌 이름 유효성 검사
이 내용을 활용해서 회원가입 ID/비밀번호 만들 수 있습니다🤗🤗🤗
- 한글 2글자 이상 6글자 이하의 문자열
- 단 자음/모음 경우는 제외
- 유효한 경우 초록색 글씨로 "유효한 이름 형식입니다" 출력
- 유효하지 않은 경우 빨간색 글씨로 "잘못된 형식입니다." 출력
이름 : <input type="text" id="inputName">
<span id = "result1" class="confirm">결과</span>
----------------------------------------------------------------------
document.getElementById("inputName").addEventListener("keyup", function() {
// 한글 2글자 이상 6자 이하 문자열
const regEx = /^[가-힣]{2,6}$/;
const result1 = document.getElementById("result1");
// 요소.classList : 요소가 가지고 있는 클래스를 배열로 반환
// 요소.classList.remove("클래스명") : 요소의 특정 클래스 제거
// 요소.classList.add("클래스명") : 요소의 특정 클래스 추가
// 요소.classList.toggle("클래스명") : 클래스가 있으면 제거 없으면 추가
if(regEx.test(this.value)) {
result1.innerText = "유효한 형식 입니다."
result1.classList.add("cofirm");
result1.classList.remove("error");
} else {
result1.innerText = "잘못된 형식 입니다."
result1.classList.add("error");
result1.classList.remove("confirm");
}
})
