정규 표현식 (23.06.21)

현·2023년 6월 21일
JavaScript
0

Javascript

목록 보기
6/13
post-thumbnail

📝 정규 표현식(Regular Expression)

특정한 규칙을 가진 문자열 집합을 표현하는 데 사용하는 형식 언어

  • 정규 표현식을 이용하면 입력된 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있다.

📌 정규 표현식 참고 사이트

📌 정규 표현식 객체 생성 및 확인하기

💡 정규 표현식 객체 생성 및 확인하기

1) const regExp = new RegExp("정규표현식");

2) const regExp = /정규표현식/;
-> 양쪽 '/' 기호 : 정규 표현식의 리터럴 표기법

💡 문자열 패턴 확인 메소드(함수)

1) regExp.test(문자열)
-> 문자열에 정규 표현식과 일치하는 패턴이 있을 경우 true, 없으면 false

2) regExp.exec(문자열)
-> 문자열에 정규 표현식과 일치하는 패턴이 있을 경우
처음 매칭되는 문자열을 반환, 없으면 null 반환

✏️ 코드로 살펴보기

  • html
    <button id="check1">확인하기</button>
  • js
// 정규 표현식 객체 생성 + 확인하기
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));
})

📌 정규 표현식의 메타 문자

문자열의 패턴을 나타내는 문자열
-> 문자마다 지정된 특별한 뜻이 담겨 있다.

  • 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칸 (개행문자를 제외한 문자 하나)

  • () : 포획 괄호, 괄호 내부에 대응되는 부분을 찾아서 기억함
  • | : 또는

✏️ 코드로 살펴보기

  • html
    <button id="btn1">확인하기</button>

    <div id="div1" class="area"></div>
  • js
document.getElementById("btn1").addEventListener("click", function(){

    const div1 = document.getElementById("div1");

    div1.innerHTML = ""; // 내용 모두 삭제

    // 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]/ , sub : " + regExp2.test("sub") + "<hr>";    
    div1.innerHTML += "/[abcd]/ , qwert : " + regExp2.test("qwert") + "<hr>";    

    // ^(캐럿) : 문자열의 시작을 의미
    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
})

✏️ 출력 화면

📌 클래스 관련 함수

💡 요소.classList

요소가 가지고 있는 클래스를 배열로 반환

💡 요소.classList.remove("클래스명")

요소의 특정 클래스 제거

💡 요소.classList.add("클래스명")

요소의 특정 클래스 추가

요소.classList.toggle("클래스명")

클래스가 있으면 제거 없으면 추가

💡 이름 유효성 검사

✏️ 코드로 살펴보기

  • html
    <h5>한글 2~5글자</h5>
    이름 : <input type="text" id="inputName"> <br>
    <span id="inputNameResult"></span>
  • js
// 이름 유효성 검사
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.innerText = "유효한 이름 형식입니다.";
        span.style.color = "green";
        span.style.fontWeight = "bold";

    } else{
        span.innerText = "이름 형식이 유효하지 않습니다.";
        span.style.color = "red";
        span.style.fontWeight = "bold";
    }
    
    // 빈칸인지 검사
    // 빈칸이라면 span에 작성된 내용 초기화(삭제)
    // (-> 이름을 쓰고 지웠을 때 처음 화면처럼 보여야 함)
    if(this.value.trim().length == 0){
        span.innerText = "";
    }
})

✏️ 출력 화면

  • 유효할 때

  • 유효하지 않을 때


💡 주민등록번호 유효성 검사

✏️ 코드로 살펴보기

  • html
    주민등록번호 : <input type="text" id="inputPno"> <br>
    <span id="inputPnoResult">주민등록번호를 작성해 주세요.</span>
  • js
// 주민등록번호 유효성 검사
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]) : 괄호 내 | 기호를 기준으로 구분되며
    // 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 = "";
    }
})

✏️ 출력 화면

  • 유효할 때

  • 유효하지 않을 때

profile
현
풀스택 개발자 기록집 📁
이전 포스트

이벤트 (Event) (23.06.20~21)

다음 포스트

문자열, 숫자, 형변환, 연산자 (23.06.21)

0개의 댓글