[js]정규표현식

·2024년 12월 25일

정규표현식

(=정규식, Regular Expression)

정규표현식의 이론적 개념

1) 왜 탄생되었는가?

  • 사용자로부터 form 요소를 활용해서 어떤 값을 전달받는 경우, 특정 패턴을 설정해놓고, 해당 패턴의 true // false 구분 및 분류
    => 유효성 검사 혹은 예외 조항처리를 효율적

2) 패턴 = 규칙

3) 정규표현식은 패턴 & 플래그

  • 패턴 : 공통적인 규칙
  • 플래그 : 해당 요소의 옵션

4) 정규표현식을 생성하는 방법 - 2가지

  • 직접적으로 패턴을 정의하는 방식
  • new RegExp() 예약어 활용, 프로토타입 객체 => 정규표현식

5) 정규표현식 전용 메서드

  • 정규표현식.test("문자열") : 정의해놓은 정규표현식 패턴을 정확하게 따르고 있는지 확인하기 위한 메서드 (true//false)
  • 정규표현식.exex("문자열") : 정규표현식에 매칭되는 문자열이 있으면 해당 결과값을 배열의 자료형태로 반환
  • 문자열.match(정규표현식) : 해당 문자열 내 정규표현식에 일치하는 값을 찾아줄 때 사용
  • 문자열.replace(정규표현식, 바꿀문자열) : 해당 문자열에서 정규표현식에 매칭되는 문자열을 찾아서 바꿀문자열로 교체

6) 정규표현식에서 자주사용되는 플래그 타입 (대소문자 구별)

  • i(international) : 문자열 내 영문자를 찾아오거나 검사할 때, 대,소문자를 구별하지 않고 검색!
  • g(global) : 입력된 문자열 전역을 검색!!// if, g라는 플래그가 입력되지 않는다면, 무조건 설정한 패턴을 첫번째로 검색되는 문자열만 찾아줌

7) 정규표현식에서는 문자열 내에서는 특정부분이 숫자의 기원, 문자의 기원인지를 구분할 수 있는 방법제시 => 문자 클래스!

  • 숫자 클래스 (digit class) : d
    • 패턴을 정의할 때, \d : 0~9까지의 숫자를 찾아올 때 (숫자의 형태!, 문자지만 숫자의 형태)
    • 패턴을 정의할 때, \D : 숫자가 아닌 모든 문자오고자 할 때!
  • 공백 클래스 (space class) : s
    • 패턴을 정의 할 때, \s : 문자열 가운데 공백 혹은 줄바꿈 등의 여백요소를 찾아오고자 할 때
    • 패턴을 정의 할 때, \S : 문자열 가운데 공백이 아닌 모든 문자를 찾아오고자 할 때
  • 단어 클래스 (word class) : w
    • 패턴을 정의 할 때, \w : 문자열에 들어가는 포함되는 숫자, 언더바, 대쉬등을 찾아오고자 할때 (inner)
    • 패턴을 정의 할 때, \W : 문자열에 포함되지 않는 숫자, 언더바, 대쉬등을 찾아오고자 할때 (outer)

8) 정규표현식에서는 시작, 끝 체크하기위한 목적으로 탄생한 기호!

  • ^ : 캐럿 => 문자열의 시작을 의미
    • 1) 특정범위를 지정하는 []안에서 사용되는 경우에는 기존 캐럿의 기능 변경 > 반대의 의미 (== !)
  • $ : 달러 => 문자열의 끝을 의미

9) 정규표현식, 반복패턴

  • [문자열] : 특정범위를 지정하고자 할 때
  • {문자열} : 반복패턴 횟수를 지정하고자 할 때 (숫자)
  • 문자열+ : 해당 문자열이 한번 이상 반복되는 경우
  • 문자열? : 해당 문자열이 1번 있는 경우 (해당 문자열을 한번도 사용하지않은 경우에도 true)
  • 문자열* : 해당 문자열이 횟수에 관계없이 1번 이상 반복되는 경우 (해당 문자열이 특정 반복되지 않고 있는 경우에도 찾아옴)
  • . : 어떤 문자열인지 지칭하지 않은 상태에서 그냥 문자라는 것이 존재하는지 여부 판단
    ex) [x.y] => xay, xzy (true)

10) 정규표현식, OR 검색!

  • vertical bar | => 반드시 1개만 사용 // 절대 띄어쓰기 금지

정규표현식 양식 정리

1. 숫자만 가능한 가능한 정규표현식 패턴

const regexp = /^[0-9]+$/;

2. 양의 정수만 가능한 정규표현식 패턴

const regexp1 = /^[1-9]\d*$/;

3. 음의 정수만 가능한 정규표현식 패턴

const regexp2 = /^\-[1-9]\d*$/;

4. 영문자를 찾아오도록 하는 정규표현식 패턴

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

5. 숫자와 영문자를 찾오도록 하는 정규표현식 패턴

const regexp4 = /^[a-zA-Z0-9]+$/;

6. 한글만 찾아오도록 하는 정규표현식 패턴

const regexp5 = /^[가-힣]+$/;
  • 한글은 특이하게 전체를 선택할 때 가-힣 으로 표현한다.

7. 한글과 영문자만 가능한 정규표현식 패턴

const regexp6 = /^[가-힣a-zA-Z]+$/;

8. 문자열의 길이가 5~10개 패턴

const regexp7 = /^.{5,10}$/;

9. 전화번호 패턴

const regexp8 = /^010-\d{4}-\d{4}$/;
const regexp8-2 = /^010\d{8}$/;

10. 이메일 패턴

const regexp9 = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9._%+-]+\.[a-zA-Z]{2,}$/;
  • . : .은 특수문자로 인식되므로 정규표현식으로 인식되도록 \ 추가
  • {2,} : 최소 2글자 이상
profile
하고싶은거 짱많은 주니어 프론트엔드 개발자

0개의 댓글