Regular Expression

들어가기 전에

udemy 강의 중 vanila js 프로젝트 중 회원가입 구현에서 사용해보았다.
비밀번호는 특수문자, 숫자, 영어 대소문자를 포함하여 8자 이상 등의 조건은 대개 검색하면 활용할 수 있도록 나와있다. 
하지만 정규표현식을 해석할 수 있도록 기본부터 이해하도록 한다.

정규 표현식은

일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다.

문자열에서 특정 내용을 1.찾거나 2.대체하거나 3.발췌하는데 사용

자바스크립트의 고유 문법이 아님, 자바스크립트는 ES3부터 도입. 대부분 언어, 에디터에 내장되어 있음.

• 정규표현식 리터럴 표기법으로 생성할 수 있다 : **/regexr/i** /(시작) 패턴 /(종료) i(플래그) 구조

  • 플래그(*옵션이며, 없이 검색할 경우 첫번째 매칭된 대상만 검색 후 종료)
    • i : Ignore case; 대소문자 구별X 검색
    • g: Global; 문자열 내 모든 패턴을 검색
    • m: Multi Line; 문자열 행이 바뀌어도 검색

• 정규표현식을 사용하는 자바스크립트 메소드:

  .exec(), **.test()**, **.match()**, .replace(), .search(), .split()

  regexp, string 객체별 메소드와 반환하는 값

  • RegExp.prototype**.exec(targetStr) ⇒** [ '정규표현식', index: <Number>, input: '대상 문자열(targetStr' ]
  • RegExp.prototype**.test(targetStr) ⇒** true or false boolean type
  • String.prototype**.match(regexr)** ⇒ ['정규표현식', '매치되는 문자열']
  • String.prototype**.replace(regexr, '대체 문자열')** ⇒ 정규표현식부분 대체된 전체 문자열
  • String.prototype**.search(regexr)** ⇒ 정규표현식 부분 인덱스값
  • String.prototype**.split(regexr)** ⇒ [ '정규표현식 부분 제외된 부분문자열', '공백', '공백 포함 문자열', ...]

사용 예

const targetStr = 'This is a pen.';
const regexr = /is/ig;

// RegExp 객체의 메소드
console.log(regexr.exec(targetStr)); // [ 'is', index: 2, input: 'This is a pen.' ]
console.log(regexr.test(targetStr)); // true

// String 객체의 메소드
console.log(targetStr.match(regexr)); // [ 'is', 'is' ]
console.log(targetStr.replace(regexr, 'IS')); // ThIS IS a pen.
// String.prototype.search는 검색된 문자열의 첫번째 인덱스를 반환한다.
console.log(targetStr.search(regexr)); // 2 ← index
console.log(targetStr.split(regexr));  // [ 'Th', ' ', ' a pen.' ]

• 패턴

  • . 문자(letter), ... 세개 문자 검색(공백 포함)

  • + 붙이면 앞선 패턴을 최소 한번 반복

    e.g.) /A+/g 이면 'A'가 한번 이상 반복되는 문자열: 'A', 'AA', 'AAA' , ... 등을 반복 검색

  • | : or

  • [] : [ ]안에 문자는 or로 작동

    e.g.) /[AB+]/g : 'A'나 'B'가 한번 이상 반복되는 문자열을 반복 검색

  • - : 범위를 지정하려면 [ ] 내 - 사용

    e.g.) /[A-Z]+/g : 대문자 알파벳 A부터 Z까지 반복되는 문자열을 추출

     /[A-Za-z]+/g ← 대소문자 구별하지 않고 추출
    
     /[0-9]+/g : 숫자 0부터 9까지 한번 이상 반복되는 문자열 반복 검색
    

    • 통화와 같이 , 포함된 경우 이를 정규표현식에 포함시킨다 '24,000'

      /[0-9,]+/g === /[\d,]+/g

  • \\d : 숫자 0~9 검색

  • \\D : '0'~'9'를 수가 아닌 문자열로 검색

  • \\w : 알파벳과 숫자 검색

  • \\W : 알파벳과 숫자가 아닌 문자열 검색

  • ^ : 특정 단어로 시작하는지 검사 ⇒ boolean(true or false) type return

    /^https/

    • [^] : 특정 단어로 시작하지 않는지 검사 : [^a-z] ← 알파벳 소문자로 시작하지 않는지

  • $ : 특정 단어로 끝나는지 검사

    /html$/

  • \\s : 스페이스, 탭 등의 공백

    /^[\s]+/ : 공백으로 시작하는 반복되는 문자열 검색

  • { num1, num2 } : 자릿 수 범위 : /^[A-Za-z0-9]{4,10}$/ ← 알파벳 대소문자 또는 숫자로 시작하고 끝나며($) 4~10자리인지 검색

  *이메일 검사

  const cellphone = '010-1234-5678';
  
  const regexr = /^\\d{3}-\\d{3,4}-\\d{4}$/;
  
  console.log(regexr.test(cellphone)); // true
  

  *핸드폰 번호 형식 검사

  const cellphone = '010-1234-5678';
  
  const regexr = /^\\d{3}-\\d{3,4}-\\d{4}$/;
  
  console.log(regexr.test(cellphone)); // true
  

  *특수문자 포함여부 검사

  const targetStr = 'abc#123';
  
  // A-Za-z0-9 이외의 문자가 있는지 검사
  let regexr = /[^A-Za-z0-9]/gi;
  
  console.log(regexr.test(targetStr)); // true
  
  // 아래 방식도 동작한다. 이 방식의 장점은 특수 문자를 선택적으로 검사할 수 있다.
  regexr = /[\\{\\}\\[\\]\\/?.,;:|\\)*~`!^\\-_+<>@\\#$%&\\\\\\=\\(\\'\\"]/gi;
  
  console.log(regexr.test(targetStr)); // true
  
  // 특수 문자 제거
  console.log(targetStr.replace(regexr, '')); // abc123
  

  *출력예제는 모던 자바스크립트 딥다이브 piemaweb.com/js-regexp 에서 발췌