/^정규표현식$/g

코딩테스트 문제를 풀다가 막혀서 답을 봤는데, 정규표현식으로 푸니 복잡하지않고 깔끔하게 풀려서 정규표현식 공부도 할겸 블로그를 쓴다~

풀고있던 문제 👉 신규 아이디 추천

참고한 사이트 👉 tcp school
w3schools
정규표현식 설명 사이트

---

정규표현식(regular expression)

정규표현식이란 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴

📝 문법
/pattern/modifiers

정규표현식 패턴

modifiers

정규 표현식을 생성할 때 modifiers를 사용하여 기본 검색 설정을 변경할 수 있다. 이렇게 설정된 modifiers는 나중에 추가되거나 삭제될 수 없다.

modifiers	설명
i	검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정함.
g	검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정함.
m	검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정함.
y	대상 문자열의 현재 위치부터 비교를 시작하도록 설정함.

특수 문자(special characters)

정규 표현식을 사용하여 단순한 패턴을 검색하고자 할 때는 찾고자 하는 문자열을 직접 나열하면 된다. 하지만 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.

특수 문자	설명
\	역슬래시\ 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함.
\d	숫자를 검색함. /[0-9]/와 같음.
\D	숫자가 아닌 문자를 검색함. /[^0-9]/와 같음
\w	언더스코어()를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9]/와 같음.
\W	언더스코어(), 영문자, 숫자가 아닌 문자를 검색함. /[^A-Za-z0-9]/와 같음.
\s	띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자를 검색함.
\S	띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자가 아닌 문자를 검색함.
\b	단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색함.
\xhh	16진수 hh에 해당하는 유니코드 문자를 검색함.
\uhhhh	16진수 hhhh에 해당하는 유니코드 문자를 검색함.

quantifier

정규 표현식에서는 특수 문자로 수량을 나타내는 다양한 quantifier를 사용할 수 있습니다.

quantifier	설명
n*	바로 앞의 문자가 0번 이상 나타나는 경우를 검색함. /{0, }/와 같음.
n+	바로 앞의 문자가 1번 이상 나타나는 경우를 검색함. /{1, }/과 같음.
n?	바로 앞의 문자가 0번 또는 1번만 나타나는 경우를 검색함. /{0,1}/과 같음.

괄호(bracket)

정규 표현식에서 사용할 수 있는 여러 가지 괄호의 의미는 다음과 같다.

bracket	설명
a(b)c	전체 패턴을 검색한 후에 괄호 안에 명시된 문자열을 저장함. (ex : "abc"를 검색한 후에 b를 저장함.)
[abc]	꺾쇠 괄호([]) 안에 명시된 문자를 검색함. (ex : "abc"를 검색함.)
[0-3]	꺾쇠 괄호([]) 안에 명시된 숫자를 검색함. (ex : 0부터 3까지의 숫자를 검색함.)
[\b]	백스페이스 문자를 검색함.
{n}	앞의 문자가 정확히 n번 나타나는 경우를 검색함. n은 반드시 양의 정수이어야만 함.
{m,n}	앞의 문자가 최소 m번 이상 최대 n번 이하로 나타나는 경우를 검색함. m과 n은 반드시 양의 정수이어야만 함.

위치 문자

정규 표현식에서는 패턴을 검색할 단어의 위치를 지정할 수 있다.

위치 문자	설명
^a	단어의 맨 앞에 위치한 해당 패턴만을 검색함. (ex : 'a'로 시작하는 단어의 'a'만을 검색함.)
a$	단어의 맨 뒤에 위치한 해당 패턴만을 검색함. (ex : 'a'로 끝나는 단어의 'a'만을 검색함.)

---

예시

정규표현식 이용해 회원가입 페이지를 만든적이 있는데, 그때 당시 작성했던 코드는 다음과 같다. (귀찮으면 value만 보면된다.)
(react-hook-form 라이브러리를 써서 나타낸 코드)

<input
  name="email"
  className="email w-3/4 px-4 py-3"
  placeholder="이메일주소"
     {...register("email", {
        required: "이메일을 입력해 주세요",
        pattern: {
        value:
           /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
        message: "이메일 형식에 맞게 입력해 주세요",
  },
 })}
/>

작성한 정규표현식을 풀어보자면 다음과 같다.
? -> 바로 앞의 문자가 0번 또는 1번만 나타나는 경우를 검색
* -> 바로 앞의 문자가 0번 이상 나타나는 경우를 검색
/i -> 검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정

👉 검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정하며, 처음은 대소문자이거나 숫자로 시작해야한다. 특수문자는 -_.이 들어갈 수 있지만 한 번만 사용해야하며, 그 뒤는 대소문자와 숫자가 들어갈 수 있다. @를 기준으로 앞에 아무것도 쓰지 않으면 message를 띄우고 @뒤는 앞서 언급했던 조건과 같다.(마찬가지로 여기서 내용을 입력하지 않으면 message가 나옴) "."뒤엔 대소문자만 들어가고 2~3개만 들어갈 수 있다.

(이 내용이 틀렸다면 수정하겠습니다 미리 감사합니당 😊)

조건에 만족하는 예시 👉 jetom@jetom.com, jetom1008@email.kr