[정규식 패턴] 내가 보려고 적어두는 자주 쓰는 정규식 표현

개발에서 정규식은 떼고싶어도 뗄 수 없는...

정규식 공식문서를 아무리 쳐다봐도 내가 원하는 패턴을 만들기란 넘 힘들다...

 

그래서 자주 쓰는 정규식 패턴을 함수형태로 만들어 놓고, 내가 필요할 때마다 꺼내보려고 글을 쓴다.

(겸사겸사 도움도 됐으면 하는 마음ㅋㅋ)

---

1. 핸드폰 번호 하이픈 넣어주기 정규식

const regPhone = (data) => {
  data = data.replace(/[^0-9]/g, "");
  data = data.replace(/(\d{3})(\d{4})(\d)/, "$1-$2-$3");
  return data.slice(0, 13);
};

1. 숫자 외의 문자가 들어오면 지워준다.

2. 3자리 4자리 4자리 중간에 - 를 넣어준다.

3. 마지막 slice는 13자리 이상의 문자를 입력할 수도 있으므로 글자의 0번째부터 13자리까지 잘라서 반환해줌

첫번째 줄에 if문으로 data의 길이를 검사해서 return하는 식으로 처리하고 싶었는데 생각대로 잘 안되길래 그냥 마지막에서 잘라주는 방식으로 변경함 ㅠㅠ

---

2. 공백 제거하기

const delSpace = (data) => {
  return data.replace(/\s/g, "");
};

얘는 받아온 데이터가 \s(→ 스페이스바, 탭을 뜻하는 정규식 기호)이면 지워준다.

얘는 은근히 유용하게 쓰고있다.

 

사용자가 글이나 댓글 작성 시 공백이나 탭만 입력하고 등록버튼을 누르면 어쨌거나 값이 있다고 판단하는 경우가 많아서 submit될 때가 있다.

그럴 때 얘를 submit 전 if문에 넣어주게되면 현재 input 등에 들어있는 값에서 공백을 모두 지워주고 입력한 내용이 있는지 확인할 수 있는 것이다.

if(delSpace(인풋값 value) === "") alert("글을 입력해주세요);

이런 식으로...

 

그리고 회원가입 시 이메일이나 비밀번호 닉네임 등을 받을 때 공백을 제거할 때도 쓸 수 있어 편리하다.

---

3. 숫자만 입력받기

const onlyNum = (data) => {
  return data.replace(/[^0-9]/g, "");
};

얘도 느낌은 비슷하다... 0~9의 숫자가 포함되지 않으면 지워줌

---

4. 한글과 영어만 입력받아야 할 때 (특수 문자도 안됨)

const onlyText = (data) => {
  return data.replace(/[^ㄱ-ㅎ가-힣a-zA-Z]/g, "");
};

앞에 ㄱ-ㅎ을 넣은 이유는 가-힣만 적어주니까

input 박스에서 글자를 타이핑할 때 자음이 보이지 않아 어색한 느낌을 주기 때문에 넣었다..

무슨 말인지 이해안되면 저 정규식 패턴에서 ㄱ-ㅎ를 빼고 적용해보면 알게될 것이다. 설명 고자라 나중에 사진 추가하든지 하겠음

---

5. 비밀번호 패턴 유효성 검사 패턴

이건 어떤 분 블로그 보고 했는데 어느 분이였는지 기억이 안남..ㅠㅠ

const passwordTest = (data) => {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/g.test(data);
};

얘는 최소 8자에 하나의 문자 및 하나의 숫자 및 하나의 특수 문자 포함된 비밀번호인지 체크하는 것이다.

조건에 만족하면 true를 아니라면 false를 반환한다.

---

6. 이메일 패턴 유효성 검사 패턴

const emailTest = (data) => {
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g.test(data);
};

@와 .이 들어갔는지, 그리고 .뒤에 영어가 2자리 이상인지 체크한다.

조건에 만족하면 true를 아니라면 false를 반환한다.

---

7. 금액을 3자리마다 콤마 , 찍어주기

const NumberWithComma = (data) => {
  return String(data).replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
};

글자가 아닌 숫자를 replace하려고하니까 에러나서 String으로 강제 형변환 시켜준 뒤 replace함수를 실행한다.

그리고 3자리 단위마다 쉼표를 넣어주는 패턴이다!

---

앞으로도 유용한 정규식 패턴이 있다면 추가할 예정임!