[JS] 정규표현식 기호, 메서드 (Regex : Regular Expression)

1. 정규표현식

 코드를 작성할 때 문자열의 패턴일 일정한 경우가 있다. 나 같은 경우에는 실전프로젝트에서 회원가입 폼에 있는 회원의 휴대전화 번호를 입력받을 때 모두 "010-0000-0000"과 같은 패턴으로 받고 싶었다. 01012345678이 모두 010-1234-5678로 입력되게 바꾸고 싶었다. 나의 경우에는 전화번호가 "XXX-XXXX-XXXX"라는 일정한 패턴으로 이루어져 있다. 이러한 경우에 저 패턴을 표현하는 방식을 정규표현식이라고 한다.

 정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식이다. 이것을 형식 언어, formal Language라고 한다.

참고하면 좋은 블로그는 링크로 걸어놨다.

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC#%ED%95%B8%EB%93%9C%ED%8F%B0_%EB%B2%88%ED%98%B8_%ED%98%95%EC%8B%9D

📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제

---

2. 정규식 구성

// 리터럴 방식
const regex = /abc/;

// 생성자 방식
const regex = new RegExp("abc"); // 방법 1
const regex = new RegExp(/abc/); // 방법 2

 정규식을 작성할 때 규칙, 구성이 있다. 리터럴 방식을 주로 사용할 텐데, 슬래시 ( / )가 시작기호와 종료 기호로 사용된다. 시작과 끝 사이에 우리가 찾아낼 패턴을 작성하면 된다. 

---

3. 실전 프로젝트에서의 정규식 사용

  /** 휴대전화 자동 하이픈 useEffect */
  useEffect(() => {
    if(numberValue.length === 11){ // 하이픈 없이 번호만 입력한 경우
      setValues({
        numberValue : numberValue.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3') // 정규식
      })
    } else if (numberValue.length >= 13){
      setValues({
        numberValue : numberValue
        // 사용자가 직접 하이픈 입력해서 전화번호 작성시 하이픈 공백으로 변하고 자동 하이픈으로 변경함
        .replace(/-/g, '')
        .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
      })
    }
  }, [numberValue])

 위 코드는 내가 정규식을 배우게 된 계기인 전화번호 입력란에 자동 하이픈 기능을 추가하는 코드이다. useEffect의 의존성 배열에 전화번호 입력값을 onChange로 변하는 state인 numberValue를 넣는다. numberValue가 변할 때마다 입력값을 조건에 따라 정규식의 형태로 만든다. 정규식의 형태로 만들기 위해서는 정규식 메서드의 종류를 알아놓아야 활용할 수 있다.

3 - 1. 정규식 메서드

 정규식을 가지고 전화번호와 아이디, 비밀번호 유효성검사와 같은 기능을 사용하기 위해서 자바스크립트 정규식 메서드를 이용해서 패턴을 검사하고, 매칭되는 문자열을 추출하거나 변환할 수 있다.

메서드	의미
("문자열").match(/정규식/플래그)	"문자열"에서 "정규식"에 매칭되는 항목들을 배열로 반환
("문자열").replace(/정규식/, "대체문자열")	"정규식"에 매칭되는 항목을 "대체문자열"로 변환
("문자열").split(정규식)	"문자열"을 "정규식"에 매칭되는 항목으로 쪼개어 배열로 반환
(정규식).test("문자열")	"문자열"이 "정규식"과 매칭되면 true, 아니면 false 반환
( 정규식 ).exec( "문자열" )	match 메서드와 유사 (단, 무조건 첫번째 매칭 결과만 반환)

---

3 - 2. 정규식 플래그

 플래그라는 용어에 대해 설명하겠다. 플래그는 정규식의 고급 검색을 위한 전역 옵션을 설정할 수 있는 기능이다.

내 코드를 보면 repalce안에 사용하는 정규식 뒤에 플래그 g를 사용하는 것을 볼 수 있다. 이제 이 플래그의 종류와 각 플래그를 설명하겠다.

플래그	의미	설명
i	Ignore Case	대소문자를 구별하지 않고 검색한다.
g	Global	문자열 내의 모든 패턴을 검색한다.
m	Multi Line	문자열의 행이 바뀌어도 검색을 계속한다
s		.(모든 문자 정규식)이 개행 문자 \n도 포함하도록한다.
u	Unicode	유니코드 전체를 지원한다.
y	Sticky	문자 내 특정 위치에서 검색을 진행한다.

---

3 - 3. 정규식 기호

정규식에서 사용하는 특정 문자나 숫자를 의미하는 기호를 알아두면 좋다. 아니 알아야된다.

패턴	의미
A-Z	영어 대문자 ( - 으로 범위 지정)
a-z	영어 소문자 ( - 으로 범위 지정)
0-9	숫자 ( - 으로 범위 지정)
.	모든 문자열 (숫자, 한글, 영어, 특수기호, 공백 모두) / 줄바꿈 X
\d	숫자
\D	숫자가 아닌 것
\w	밑줄 문자를 포함한 영숫자 문자에 대응 / [A-Za-z0-9_] 와 동일
\W	\w 가 아닌 것
\s	space 공백
\S	\s 가 아닌 것
\특수기호	\* \^ \& \! \? 등

---

  // 임휘훈 작성 :  한글, 영어, 숫자, 특수문자 구분 정규식 모음
  let checkEngA = /[A-Z]/;
  let checkSpc = /[~!@#$%^&*()_+|<>?:{}]/;
  let checkKor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
  
      // 데이터 전송
    if (idRef.current.value !== "") {
      if(idRef.current.value.length >= 5 && 
        idRef.current.value.length <= 20 && 
        !checkEngA.test(idRef.current.value) && 
        !checkSpc.test(idRef.current.value) && 
        !checkKor.test(idRef.current.value)){
        axios
          .post("/user/checkId", {
            id: idRef.current.value,
          })
          .then((res) => {
            if (res.data === true) {
              // idRef.current.disabled = true;
              spanRef.current.style = "color:gray";
              setText("※ 사용 가능한 ID 입니다.");
              setIsCheck(true);
            } else {
              idRef.current.value = "";
              idRef.current.focus();
              spanRef.current.style = "color:red";
              setText(
                "※ 사용 불가능한 ID 입니다. 다른 ID를 입력해주세요."
              );
              setIsCheck(false);
            }
          });
      } else {// 아이디 길이 조건 X
        idRef.current.focus();
        spanRef.current.style = "color:red";
        setText("※ ID는 5 ~ 20자의 영문 소문자, 숫자와 특수기호(_), (-)만 사용가능합니다.");
      }
    }else{
      // 아이디 칸이 빈칸일때 231110 14:10 추가 -임휘훈-
      idRef.current.focus();
      spanRef.current.style = "color:red";
      setText("※ ID를 입력해주세요.");
    }

 지금까지 설명한 것을 이해하고 ID 유효성 검사를 작성한 코드를 보자. 리터럴 방식으로 영어 대문자, 특수문자, 한글 정규식을 선언했다. test 메서드를 사용해서 true false를 반환해서 유효성 검사를 실시했다. 

 이런식으로 정규식은 특정 패턴을 파악할 때 정말 유용하니 한번쯤 사용해보자.