정규 표현식 (Regular Expression)

✅ 들어가기 전 정규 표현식을 사용하는 메서드에 대해서 간단하게 정리하고 시작하겠습니다. 관련 메서드를 잘 모르신다면 한 번씩 읽어주시면 다음 내용 이해에 도움이 됩니다!

 

• RegExp.prototype
  
  
  • (정규표현식).exec(문자열);
    주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 null로 반환
    
    
  • (정규표현식).test(문자열) - str : 정규 표현식 일치를 수행할 문자열
    주어진 문자열 중 정규 표현식이 일치하는 부분이 있으면 true, 없으면 false를 반환
• String.prototype
  
  
  • (문자열).match(정규표현식)
    주어진 문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 Array를 반환
    
    
  • (문자열).replace(정규표현식, 대체문자열)
    정규표현식에 매칭되는 항목을 대체문자열로 변환
    
    
  • (문자열).split(정규표현식)
    문자열을 정규표현식에 매칭되는 항목으로 쪼개어 배열로 반환

---

 

1. 정규 표현식 (Regular Expression)

  ✍ 1-1. 정의

• 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.
• 정규 표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 단점이 있습니다.
• 사용자로부터 입력받은 데이터가 유효한지 체크할 때 사용합니다. (ex. 전화번호, 금액, 한글명, 영문명 등...)

 

  🧐 1-2. 사용법

   1) 선언 방법

 

 

• 정규 표현식은 위 이미지처럼 리터럴 표기법으로 생성합니다.
• 정규 표현식을 사용하는 JS 메서드는 아래와 같습니다.
  
  
  1. RegExp의 exec(), test() 메서드
  2. String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드

 

   2) 플래그

 

• 플래그는 위와 같은 종류가 있습니다.
• 플래그는 옵션이므로 선택적으로 사용합니다.
  따라서 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫 번째 매칭 한 대상만 검색하고 종료합니다. 

let targetStr = "This is targetStr";

let reg = /is/;
console.log(targetStr.match(reg)); // ['is', index: 2, input: 'This is targetStr', groups: undefined]

// 대소문자 구분X, 문자열내 모든 패턴 검사
reg = /is/ig;
console.log(targetStr.match(reg)); // ['is', 'is']

 

   3) 패턴

 

• 패턴에는 검색하고 싶은 문자열을 지정합니다. 이대 문자열의 따옴표는 생략합니다.
• 패턴은 특별한 의미를 가지는 메타 문자 또는 기호로 표현할 수 있습니다.
  
  • . (dot) 는 임의의 문자 한 개를 의미합니다.
  • | 를 사용하면 or의 의미를 가집니다.
  •  + 를 사용하면 분해되지 않은 단어로 추출이 가능합니다.
  • 범위를 지정하려면 [ ] 내에 - 를 사용합니다. 

let targetStr = "This is targetStr 100";
let targetStr2 = "AA AAA AAAA BB CCC";

// . (dot) 예제
let reg = /./g;
console.log(targetStr.match(reg)); // ['T', 'h', 'i', 's', ' ', 'i', 's', ' ', 't', 'a', 'r', 'g', 'e', 't', 'S', 't', 'r', ' ', '1', '0', '0']

// | 예제
reg = /T|S/g; // T 또는 S 
console.log(targetStr.match(reg)); // ['T', 'S']

// + 예제
reg = /A+/g; // A를 포함하고 있는 문자열
console.log(targetStr2.match(reg)); // ['AA', 'AAA', 'AAAA']

// [] 예제
reg = /[0-9]/g; // 숫자범위에 맞는 문자열
console.log(targetStr.match(reg)); // ['1', '0', '0']

reg = /[0-9]+/g; // 숫자를 포함하고있는 문자열
console.log(targetStr.match(reg)); // ['100']

 

   4) 자주 사용하는 정규표현식

 

• ^ 특정 단어로 시작하는지 검사합니다. (단 ^ 는 [ ^ ] 의 안에서는 부정-not 을 의미합니다.)
• $ 특정 단어로 끝나는지 검사합니다.
• \d 숫자인지 검사합니다.
• { } 를 사용하면 문자열이 몇 자리 인지 검색할 수 있습니다.

let targetStr = "targetStr";
let numStr = "12345abc";

// ^ : 문자열의 처음을 의미, target으로 시작하는 지 검사
let regexr = /^target/;
console.log(regexr.test(targetStr)); // true

// $ : 문자열의 끝을 의미, Str로 끝나는 지 검사
regexr = /Str$/;
console.log(regexr.test(targetStr)); // true

// \d 숫자인지 검사
regexr = /[\d]+/g;
console.log(numStr.match(regexr)); // ['12345']

// {}를 사용하면 몇자리 인지 검사 가능, 4 ~ 10자리인지
regexr = /[A-Za-z0-9]{4,10}$/;
console.log(regexr.test(numStr)); // true

 

   5) 정규표현식 패턴 한눈에 보기 !

 

정규표현식 매칭 패턴	의미
a-zA-Z	영어알파벳 (-으로 범위 지정)
ㄱ-ㅎ가-힣	한글 문자 (-으로 범위 지정)
0-9	숫자 (-으로 범위 지정)
.	모든 문자열 (단 줄바꿈은 X)
\d	숫자
\D	숫자가 아닌 것
\w	영어 알파벳, 숫자, 언더스코어(_)
\W	\w가 아닌 것
\s	space 공백
\S	space 공백이 아닌 것
\특수기호	특수기호

 

정규표현식 검색 패턴	의미
|	OR
[]	괄호안의 문자들 중 하나
[^문자]	괄호안의 문자를 제외한 것
^문자열	특정 문자열로 시작 (괄호 없을 때)
문자열$	특정 문자열로 끝남
()	그룹 검색 및 분류 (match메서드에서 그룹별로 묶어줌)
(?: 패턴)	그룹 검색 (분류 X)
\b	단어의 처음/끝
\B	단어의 처음/끝이 아님

 

정규표현식 갯수(수량) 패턴	의미
?	최대 한번 (없음 || 한개)
*	없거나 있음 (없음 || 있음) : 여러개 포함
+	최소 한개 (한개 || 여러개)
{n}	n 개
{Min,}	최소 Min개 이상
{Min, Max}	최소 Min개 이상, 최대 Max개 이하

 

🤔  정리 !

• 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.
• /regext(패턴)/g(플래그) 형식 !
• 정규표현식 매칭, 검색, 수량 패턴에 대해 잘 알아두자 !!

 

 

🔗 참고한 글

[자바스크립트] 정규표현식(Regular Expression) 기초/기본 쉽고 상세한 사용 방법 정리(샘플 예제 코