html , js 정규식

계속 미루다가 공부하는 정규 표현식!

정규표현식이란?

• 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴
• js에서는 정규 표현식도 객체이다. RegExp, exec(), test() 메서드를 사용이 가능하다
• string의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와 함께 사용이 가능하다.

정규 표현식 만들기

정규 표현식은 두가지 방법으로 만들 수 있다.

• 리터럴 방식: 슬래시로 패턴을 감싸서 작성
• const re = /ab+c/;
• RegExp 객체의 생성자 호출
• const re = new RegExp("ab+c");

정규 표현식 패턴 작성하기

• 단순 패턴은 문자열을 있는 그대로 탐색할 떄 사용
• 예를 들어 /abc/ 이 패턴은 문자열에서 정확한 순서로 "abc"라는 문자열의 조합이 나타나는 부분과 일치한다.
• "Hi, do you know your abc's?" 에 일치하는 것은 "abc"이고
• "Grab crab" 이는 "ab c"가 포함되어 있지만 정확하게 "abc"가 포함되어 있지 않다.
• 특수 문자 사용하기
• 하나 이상의 문자열을 찾는다거나 공백 문자를 찾는 등 직접적인 일치 이상의 탐색이 필요할 땐 특수 문자를 사용한다.
• /ab*c/ 패턴을 사용할 수 있다. b뒤의 *는 이전 항목의 0번 이상 반복을 의미
• "cbbabbbbcdebc" 일치하는 부분 문자열은 "abbbbc"일 것이다.

플래그

정규표현식 메타문자

자바스크립트 코드

const regId = /^[^\s][a-zA-Z]{6,19}$/;
const regPw = /^[a-zA-Z]+$/;
const regHp = /^01[016789]-\d{3,4}-\d{4}$/;

const id = document.getElementById('id');
const pw = document.getElementById('password');
const hp = document.getElementById('hp');

document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();

    let formIsTrueAndFalse = true;

    if (!regId.test(id.value)) {
        alert('아이디 형식에 실패');
        formIsTrueAndFalse = false;
        id.focus();
    }

    if (!regPw.test(pw.value)) {
        alert('비밀번호 형식에 실패');
        formIsTrueAndFalse = false;
        pw.focus();
    }

    if (!regHp.test(hp.value)) {
        alert('휴대폰 번호 형식에 실패');
        formIsTrueAndFalse = false;
        hp.focus();
    }

    if(formIsTrueAndFalse) {
        alert('성공적으로 가입되었습니다');
        document.querySelector('form').reset();
    }
});

const regExp = /apple/;
const apple = 'apple is apple is banana';

console.log(apple.match(regExp));  // ['apple']
console.log(apple.replace(regExp, 'hahahaha'));  // hahahaha is hahahaha is banana

대소문자 영어

• 처음 ^은 첫 문자열 즉 문자열이 시작하는 위치
• [^\s]는 문자열이 공백이 아닌 문자열을 찾고, ^[^\s]는 즉 처음 문자열이 공백이 아닌 것을 찾는다.
• [a-zA-Z]는 알바벳을 찾는다 소문자, 대문자
• {6,19}$는 문자열에 길이가 최소 6 ~ 최대 19까지 허용 여기서 $달러는 문자열에 마지막을 의미한다. 마지막 문자열
• 첫 번째 문자가 공백이 아니고, 알파벳으로만 이루어져 있으며, 길이가 6~19자로 제한되고, 문자열 끝에 도달하면 매칭되는 패턴

const regId = /^[^\s][a-zA-Z]{6,19}$/;

대소문자 영어2

• 처음 ^은 첫 문자열 즉 문자열이 시작하는 위치
• [a-zA-Z]는 알바벳을 찾는다 소문자, 대문자
• +는 알파벳이 한 개라도 포함되어 있느냐? $달러는 문자열에 마지막을 의미한다.
• 알파벳 문자(소문자 또는 대문자)로만 구성되어 있고, 최소 1개 이상의 문자로 이루어져 있으며, 문자열 끝까지 알파벳 문자만 포함되어야 매칭

const regPw = /^[a-zA-Z]+$/;

숫자와 하이폰(-)

• ^01 처음 문자열에 01이 들어가는가?
• [016789]-\d{3,4} (-)하이폰이 포함되어 있고 숫자인가? 010, 011, 016, 017, 018, 019(가능), 020(불가), 두 번쨰 자리가, 0, 1, 6, 7, 8, 9(만 가능하다)
• {3,4} 최소 길이가 3 ~ 최대 길이가 4 이냐?
• -\d{4}$ (-)하이폰이 포함이 되고 숫자가 포함이 되는가? 마지막 문자열까지

const regHp = /^01[016789]-\d{3,4}-\d{4}$/;

출처: MDN 웹 문서 - 정규 표현식