✏️ 정규표현식(RegExp) with JS

1. 정규표현식이란?

문자열에서 우리가 원하는 특정 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 예로 들어, website 주소 및 전화번호 찾기/ 치환 그리고 패턴유효성 검사 등에 아주 요긴하게 쓰입니다.

👉 정규표현식은 크게 다음과 같은 역할을 수행합니다.

  1. 문자 검색 (Search) 
  2. 문자 치환 (Replace)
  3. 문자 추출 (Extract)
  

2. 자바스크립트 정규표현식 생성

2-1. 생성자 함수 방식

RegExp 생성자 함수를 호출하여 사용할 수 있습니다.

   const regexp1 = new RegExp("^abc"); // new RegExp(패턴)

   const regexp1 = new RegExp("^abc",'i'); //new RegExp(패턴,플래그)

2-2. 리터럴(Literal) 방식

 ' / ' 로 감싸진 패턴을 사용합니다.

   const regexp1 = /^abc/; // /패턴/
   const regexp2 = /^abc/gi; // /패턴/플래그

💡 보통의 경우는 리터럴 방식이 편리하지만 상황에 따라 생성자 함수를 써야만 하는 경우도 있습니다.

  1. 정규식의 패턴이 변경될 수 있거나,
  2. 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우

💡 사용중인 정규식을 재할당 할 때, 상수(변하지 않는 값)가 아닌 변수로 선언해야 합니다.

  let regexp1 = /ab+c/g;
  regexp1 = /lorem/gi;
  console.log(regexp1) // /lorem/gi;
    
  const regexp2 = /ab+c/g;
  regexp2 = /lorem/gi; // TypeError

3. 플래그

💡 보통 'gm'을 많이 사용합니다.

• g : 모든 문자와 여러 줄 일치 (global)
• i : 영어 대소문자를 구분 않고 일치 (ignoreCase, insensitive)
• m : 여러 줄 일치(multiline)
• u : 유니코드 (unicode)
• y : lastIndex 속성으로 지정된 인덱스에서만 1회 일치(sticky)

❗ y 와 g 중복사용 불가합니다. 또한 비교적 최근에 추가된 플래그로 browser support 를 확인해주세요.

4. 자바스크립트 정규표현식 속성과 메소드

4-1. properties(속성)

속성	설명
flags	해당 정규식에서 플래그를 반환
source	해당 정규식에서 표현식(패턴) 반환
global	플래그 'g' 여부 boolean type으로 반환
ignoreCare	플래그 'i' 여부 boolean type으로 반환
multiline	플래그 'm' 여부 boolean type으로 반환
sticky	플래그 'y' 여부 boolean type으로 반환
unicode	플래그 'u' 여부 boolean type으로 반환

• 사용 예시
  

    // 1. 정규식.flags - 알파벳 순서대로 반환
    new RegExp('^abc','gmi').flags; // 'gim'
    
    // 2. 정규식.source
    new RegExp('^abc','gmi').source; // '^abc'
    
    // 3. 플래그 여부 확인
    new RegExp('^abx','gmi').global // true
    new RegExp('^abx','gmi').unicode // false

4-2. Methods(메소드)

메소드	문법	설명
exec	정규식.exec(문자열)	대응되는 문자열 찾아 있다면 하나의 정보(Array) 반환 정규식 객체의 속성을 업데이트(index, input 추가속성 포함) 없으면 null 반환
test	정규식.test(문자열)	일치하는 문자열이 있는지 검사 true 나 false를 반환
match	문자열.match(정규식)	대응되는 문자열 찾아 있다면 하나의 정보(Array) 반환 없으면 null 반환 *(g플래그 여부 중요-예시 참고)
search	문자열.search(정규식)	대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환
replace	문자열.replace(정규식,대체문자)	대응되는 문자열을 찾아 다른 문자열로 치환
split	문자열.split(정규식)	정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환

  ❗ 대응되는 문자열이 있는지 알고 싶다면, test나 search메소드를 사용, 
  좀 더 많은 정보를 원하면 exec나 match메소드를 사용하세요 (대신 실행이 느립니다.)

• 사용 예시
  

    let regexp1 = /abc/gm
    let regexp2 = /abc/m
    let str1 = 'Hello abc world'
    let str2 = 'Hello world'
    
    // 1. 정규식.exec(문자열) - 정규식 객체를 업데이트 하며 배열로 반환
    regexp1.exec(str1) // ["abc", index: 6, input: "Hello abc world", groups: undefined]
    regexp1.exec(str2) // null
    
    // 2. 정규식.test(문자열)
    regexp1.test(str1) // true
    regexp1.test(str2) // false
    
    // 3. 문자열.match(정규식)
    //💡 g플래그(global)가 없다면 exec와 같은 객체배열 반환, 있다면 대응문자열만 배열로 반환  
    str1.match(regexp1) // ["abc"]
    str1.match(regexp2) // ["abc", index: 6, input: "Hello abc world", groups: undefined]
    str2.match(regexp1) // null
    
    // 4. 문자열.search(정규식)
    str1.match(regexp1) // 6
    str2.match(regexp1) // -1
    
    // 5. 문자열.replace(정규식, 대체문자)
    str1.replace(regexp1, 'zye') //Hello zye world
    
    // 6. 문자열.split('')
    str2.split('').join('/') // "H/e/l/l/o/ /w/o/r/l/d"
    

📢 정규표현식 연습용 사이트와 함께 아래 정리된 표현식과 플래그를 참고하기 바랍니다.

📍 연습가능 사이트 목록
- https://regexr.com/5pr9t
- https://regex101.com/
- https://regexone.com/
- https://regexr.com/5pr9t

5. 패턴(표현식) _ 4가지 그룹

📢 4가지 그룹으로 묶어 가장 많이 쓰이는 표현식위주로 정리했습니다. 기타 다른 표현식에 대해서는, Heropy 블로그 또는 공식사이트를 참고해주세요.

5-1. 그룹과 범위

패턴	설명	예시
|	또는	a
()	그룹화(캡쳐할=기억할 그룹)	(abc) // abc
(?=)	앞쪽일치 (Lookahead)	ab(?=c) // c 앞에있는 ab
(?!)	부정 앞쪽 일치(Negative Lookahead)	ab(?!c) // c 를 제외하고 다른 문자 앞에 있는 ab
(?:)	찾지만 그룹 묶지 않기(기억X)
[]	문자셋, 괄호안의 어떤 문자든	[a-zA-Z0-9@ .] // 특수기호 그대로 사용가능
[^]	부정 문자셋, 괄호안의 어떤 문자를 제외하고	[^0-9]

5-2. 수량

패턴	설명	예시
?	없거나 있거나
*	없거나 있거나 많거나
+	앞쪽일치 (Lookahead)
{n}	n번 반복	\d{2} // 2번 반복
{min,}	최소 반복	\d{2,} // 2번-3번 반복
{min, max}	최소 그리고 최대 반복	\d{2,3} // 2번-3번 반복

5-3. 경계

패턴	설명	예시
\b	단어경계	/Java\b/ // Java
\B	단어경계가 아님	/Java\B/ // Javascript
\d	digit 숫자	/\d\d : \d\d/ // 12:34
\D	digit 숫자 아님
\w	word 문자
\W	word 문자 아님
\s	space 공백
\S	space 공백아님

5-4. 문자 타입별

패턴	설명	예시
\	이스케이프 문자	.\?$\^ //.?%^
.	어떤글자(줄바꿈 문자 제외)
^	문장 시작	/^http/
$	문장 끝	/.css$/

• 참고
  • "\소문자" : 해당타입 , "\대문자": 해당 타입 아님
  • \d == [0-9]
  • \w == [a-zA-Z0-9_]
  • \s == [\t\n\v\f\r]

---

📍 자주사용하는 정규표현식

• 특정문자열로 시작하는지
  

    let regexp1 = /^http/;

• 특정문자열로 끝나는지
  

    let regexp1 = /\.js$/;
    let regexp2 = /\.vue$/;
    
    // \. == "."  표현식에서 .은 모든 문자 나타내기 때문입니다. 

• 숫자인지
  

    let regexp1 = /^[0-9]+$/gm;
    //특수기호 미포함

• 공백으로 시작하는지
  

    let regexp1 = /^[\s]+/gm;

• 특수문자 포함 여부
  

    // 문자를 제외한 특수문자
    let regexp1 = /[^a-zA-Z0-9]/g; 
    
    // 선택적 특수문자
    let regexp2 = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/g; 

• 비밀번호로 사용가능한지 (영문 대소문자+숫자+특수문자 조합 8~10자리)
  

    let regexp1 = /^(?=.*\w)(?=.*[$@!_%*#)&_])[\w$@!_%*#)&_]{8,10}$/gm;

• 메일주소 형식에 맞는지
  

    // 구조 아이디에 ("_" , ".")만포함 모든문자  @domain("-"만 포함가능).com
    let regexp = /^[_\w.\d]+@([\w-]+\.).+$/gm;
    
    console.log("jh-Kim@naver.com j_kim@naver.com j_kim@google.com".match(regexp)) 
    // j_kim@naver.com j_kim@ui-lab.co.kr 만 출력됨
    

• 전화번호
  

    //010-xxxx-xxxx , 02-xxx-xxxx
    let regexp1 = /^0(?:\d{1,3})-(?:\d{3,4})-\d{4}$/gm;
    
    //010.XXXX.XXXX 011.XXXX.XXXX 02.XXX.XXXX
    let regexp2 = /^0(?:10|[1-9]{1,3})\.\d{3,4}\.\d{4}$/gm;
    
    //010XXXXXXXX 
    let regexp3 = /^0(?:10|[1-9]{1,3})\d{3,4}\d{4}$/gm;

• 1000단위 ',' 찍기
  

    toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

---

참고 사이트

• https://heropy.blog/2018/10/28/regexp/
• https://poiemaweb.com/js-regexp
• https://www.youtube.com/watch?v=t3M6toIflyQ&t=558s
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
• https://github.com/dream-ellie/regex