[resources] 6_정규표현식.html

정규 표현식(Regular Expression)

은 문자열에서 특정 패턴을 찾거나, 확인하거나, 수정하기 위한 강력한 도구이다.

프로그래밍 세계에서 사용하는 문자열 검사기라 할 수 있다.

1. 왜 필요한가?

만약 당신이 수천 개의 데이터 중에서 '이메일 형식'인 것만 골라내야 한다고 가정하면 상당히 피곤해진다.

if문으로 일일이 "@"이 있는지, "."이 있는지 확인하려면 코드가 매우 복잡해진다

정규 표현식을 사용하면 복잡한 규칙을 한 줄의 짧은 코드로 정의할 수 있어 간편하다.

• 이메일 형식 확인: test@email.com (맞음), test-email (틀림)
• 전화번호 형식 확인: 010-1234-5678 (맞음), 01012345678 (형식 다름)
• 비밀번호 복잡도 체크: 대문자 1개 이상, 숫자 포함 등

2. 기본적인 구성 요소 (문법)

정규식은 기호들의 조합으로 이루어진다.

주요 기호 몇 가지만 알아도 웬만한 패턴은 읽을 수 있다.

• ^: 문자열의 시작
• $: 문자열의 끝
• [a-z]: 영어 소문자 범위
• [0-9]: 숫자 범위
• +: 바로 앞의 패턴이 한 번 이상 반복됨
• *: 바로 앞의 패턴이 0번 이상 반복됨
• ?: 바로 앞의 패턴이 0번 또는 1번 존재함
• {2,}: 바로 앞의 패턴이 2번 이상 반복됨

3. 정규식 활용 예시

 

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

• ^[a-zA-Z0-9._%+-]+: 아이디 부분(영문/숫자/특수문자 조합)으로 시작한다.
• @: 반드시 @가 중간에 포함된다.
• [a-zA-Z0-9.-]+: 도메인 이름이 온다.
• \.: 반드시 점(.)이 포함된다.
• [a-zA-Z]{2,}$: 마지막은 2자 이상의 영문자로 끝난다.

 

4.연습문제

아이디@도메인.상위도메인 형태가 맞는지 검사 후

//area4에 올바른 이메일 형식 / 이메일 형식이 아닙니다. 라는 답이 나오게 만들어보기

        function checkEamil(){
           
        } 

 

 

JavaScript

상세 설명

1. 정규 표현식 (/^[...]$/):
   • ^: 문자열의 시작을 의
   • [a-zA-Z0-9._%+-]+: 아이디 부분. 영문자, 숫자, 점, 밑줄 등을 허용
   • @: 중간에 반드시 @가 있어야 한다.
   • [a-zA-Z0-9.-]+: 도메인 
   • \.: 도메인 뒤에 점(.)이 반드시 있어야 한다.
   • [a-zA-Z]{2,}: 상위 도메인입니다. 영문자로 최소 2자 이상
   • $: 문자열의 끝을 의미
2. .test() 메서드:
   • 정규식에서 제공하는 함수로, 우리가 입력한 email 문자열이 위 패턴과 일치하면 true를, 아니면 false를 반환.
3. area4.innerHTML:
   • document.getElementById("area4")를 통해 HTML 문서 내의 area4라는 id를 가진 영역을 찾고,  원하는 메시지를 텍스트로 넣어준다.