[JavaScript/DeepDive]31.RegExp

• [31.1] 정규 표현식이란?
• 정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다.
• 자바스크립트는 펄의 정규 표현식 문법을 ES3부터 도입했다.
• 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다.
  • 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.
    • // 사용자로부터 입력받은 휴대폰 전화번호
      const tel = '010-1234-567팔';
      
      // 정규 표현식 리터럴로 휴대폰 전화번호 패턴을 정의한다.
      const regExp = /*\d{3}-\d{4}-\d{4}$/;
      
      // tel이 휴대폰 전화번호 패턴에 매칭하는지 테스트(확인)한다.
      regExp.test(tel); // -> false
• 정규표현식을 사용하면 반복문과 조건문 없이 패넡을 정의하고 테스트하는 것으로 간단히 체크할 수 있다 다만 정규표현식은 주석이나 공백을 허용하지 않고 여러 가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다

 

 

• [31.2] 정규 표현식의 생성
• 정규 표현식 객체(RegExp 객체)를 생성하기 위해서는 정규 표현식 리터럴과 RegExp 생성자 함수를 사용할 수 있다.
• 일반적인 방법은 정규 표현식 리터럴을 사용하는 것이다.
  • /(시작 기호)regexp(패턴)/(종료 기호)i(플래그)
    • const target = 'Is this all there is?'
      
      // 패턴: is
      // 플래그: i => 대소문자를 구별하지 않고 검색한다.
      const regexp /is/i
      
      // test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 매칭 결과를
      // 불리언 값으로 반환한다.
      regexp.test(target); // -> true

 

 

 

• [31.3] RegExp 메서드
• RegExp.prototype.exec
  • exec 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다.
  • 매칭 결과가 없는 경우 null을 반환한다.
• RegExp.prototype.test
  • test 메서드는 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
• String.prototype.match
  • String 표준 빌트인 객체가 제공하는 match 메서드는 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다.

 

 

 

• [31.4] 플래그
• 패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.

플래그	의미	설명
i	Ignore case	대소문자를 구별하지 않고 패턴을 검색한다.
g	Global	대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색한다.
m	Multi line	문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

• 플래그는 옵션이므로 선택적으로 사용할 수 있으며, 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수도 있다.
• 어떠한 플래그를 사용하지 않은 경우 대소문자를 구별해서 패턴을 검색한다.
• 그리고 문자열에 패턴 검색 매칭 대상이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색하고 종료한다.

 

 

• [31.5] 패턴
• 문자열 검색
  • 정규 표현식의 패턴에 문자 또는 문자열을 지정하면 검색 대상 문자열에서 패턴으로 지정한 문자 또는 문자열을 검색한다.
  • RegExp 메서드를 사용하여 검색 대상 문자열과 정규 표현식의 매칭 결과를 구하면 검색이 수행된다.
• 임의의 문자열 검색
  • .은 임의의 문자 한 개를 의미한다. 
  • 문자의 내용은 무엇이든 상관없다.
• 반복검색
  • {m, n}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다.
  • 콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의하기 바란다.
  • +는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.
  • ?는 앞선 패턴이 최대 한 번(0번 포함) 이상 반복되는 문자열을 의미한다.
    • 즉, ?는 {0,1}과 같다.
• OR 검색
  • |은 OR의 의미를 갖는다.
  • /A|B/는 'A'또는 'B'를 의미한다.
• NOT 검색
  • [ ... ] 내의 ^은 not의 의미를 갖는다.
    • 예를 들어, [^0-9]는 숫자를 제외한 문자를 의미한다.
• 시작 위치로 검색
  • [ ... ] 밖의 ^은 문자열의 시작을 의미한다.
• 마지막 위치로 검색
  • $는 문자열의 마지막을 의미한다.

 

 

• [31.6] 자주 사용하는 정규 표현식
• 특정 단어로 시작하는지 검사
  • const url = 'https://example.com';
    
    // 'http://' 또는 'https://'로 시작하는지 검사한다.
    /^https?:\/\//.test(url); // -> true
• 특정 단어로 끝나는지 검사
  • const fileName = 'index.html';
    
    // 'html'로 끝나는지 검사한다.
    /html$/.test(fileName); // -> true
• 숫자로만 이루어진 문자열인지 검사
  • const target = '12345';
    
    // 숫자로만 이루어진 문자열인지 검사한다.
    /^\d+$/.test(target); // -> true
• 하나 이상의 공백으로 시작하는지 검사
  • const target = ' Hi!';
    
    // 하나 이상의 공백으로 시작하는지 검사한다.
    /^[\s]+/.test(target); // -> true 
• 아이디로 사용 가능한지 검사
  • const id = 'abc123';
    
    // 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.
    /^[A-Za-z0-9}{4,10}$/.test(id); // -> true
• 특수 문자 포함 여부 검사
  • const target = 'abc#123';
    
    (/[^A-Za-z0-9]/gi).test(target); // -> true