Skip to main content Link Menu Expand (external link) Document Search Copy Copied
⚽️ TIL, 배운 것을 그때그때 기록하자

정규표현식에 대해서 알아보자

참고 블로그

정규표현식 형식

/패턴/플래그

  • 슬래시(/) “사이”에는 매칭시킬 “패턴”을 써줍니다.
  • 슬래시(/) “다음”에는 옵션을 설정하는 “플래그”를 써줍니다.(하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션입니다.)

정규표현식 매칭 패턴(문자, 숫자, 기호 등)

: 아래 매칭 패턴을 사용하면, 훨씬 쉽게 문자/숫자/기호를 표현할 수 있습니다. | 패턴 | 의미 | | ———— | ———————————————- | | a-zA-Z | 영어알파벳(-으로 범위 지정) | | ㄱ-ㅎ가-힣 | 한글 문자(-으로 범위 지정) | | 0-9 | 숫자(-으로 범위 지정) | | . | 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두 단, 줄바꿈은 X)| | \d | 숫자 | | \D | 숫자가 아닌 것 | | \w | 영어 알파벳, 숫자, 언더스코어(_) | | \W | \w가 아닌 것 | | \s | space 공백 | | \S | space 공백이 아닌 것 | | \특수기호 | 특수기호 |

정규표현식 검색 패턴

: 아래 패턴들을 이용하여 AND, OR, StartWith, EndWith 등 다양한 조합을 만들 수 있습니다. | 기호 | 의미 | | ———— | ———————————————- | | | | OR | | [] | 괄호안의 문자들 중 하나 | | [^문자] | 괄호안의 문자를 제외한 것 | | ^문자열 | 특정 문자열로 시작(괄호 없음 주의!) | | 문자열$ | 특정 문자열로 끝남 | | () | 그룹 검색 및 분류(match메서드에서 그룹별로 묶어줌) | | (?: 패턴) | 그룹 검색(분류X) | | \b | 단어의 처음/끝 | | \B | 단어의 처음/끝이 아님 |

정규표현식 갯수(수량) 패턴

: 특정 패턴이 몇 번 반복되는지 필터링할 수 있습니다. | 기호 | 의미 | | ———— | ———————————————- | | ? | 최대 한번(없음 || 한개) | | * | 없거나 있거나 (없음 || 있음): 여러개 포함 | | + | 최소 한개(한개 || 여러개) | | {n} | n개 | | {Min,} | 최소 Min개 이상 | | {Min, Max} | 최소 Min개 이상, 최대 Max개 이하 |

정규표현식 플래그

: 플래그는 동시에 여러개 사용할 수도 있습니다. 예) gi, gm 등 | 플래그 | 의미 | | ———— | ———————————————- | | g | Global: 모든 문자 검색 (안 쓰면 매칭되는 첫 문자만 검색)| | i | Ignore Case: 대소문자 구분 안함 | | m | Multi line: 여러 행의 문자열에 대해 검색 |

정규표현식 주요 메소드

: 자바스크립트 코드 상에서는 아래 메서드를 통해 패턴을 검사하고, 매칭되는 문자열을 추출, 변환합니다. | 기호 | 의미 | | ——————————————— | ———————————————- | | (“문자열”).match(정규표현식) | “문자열”에서 “정규표현식”에 매칭되는 항목들을 배열로 반환 | | (“문자열”).replace(정규표현식, “대체문자열”) | “정규표현식”에 매칭되는 항목을 “대체문자열”로 변환 | | (“문자열”).split(정규표현식) | “문자열”을 “정규표현식”에 매칭되는 항목으로 쪼개어 배열로 반환| | (정규표현식).test(“문자열”) | “문자열”이 “정규표현식”과 매칭되면 true, 아니면 false반환 | | (정규표현식).exec(“문자열”) | match메서드와 유사(단, 무조건 첫번째 매칭 결과만 반환) |

정규표현식 활용 샘플 코드

  1. 웹사이트 주소 정규표현식: http:// 나 https:// 로 시작하고, 알파벳, 언더스코어(_), 하이픈(-), dot(.)으로 이루어져 있습니다. 
    const text = "대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com"; text.match(/https?:\/\/[\w\-\.]+/g); // ["http://dogumaster.com", "http://google.com"]
    • http로 시작하고
    • s? => s는 한 개있거나 없고
    • :가 다음에 오고
    • \/\/ => //가 오고
    • [\w-.]+ -> \w(영문자, 언더스코어), 하이픈, 점 으로 이루어진 문자가 한 개 이상(+) 있다.
    • g => 매칭되는 것을 모두 찾는다.
  2. 전화번호 정규표현식: 유선번호라면 02-111-2222, 041-111-2222 형식이고, 핸드폰번호라면 010-1111-2222 형식입니다. 숫자의 갯수가 다릅니다. 
    const text = "대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com"; text.match(/\d{2,3}-\d{3,4}-\d{4}/g); // [ '010-1111-2222', '02-333-7777' ]
    • \d{2,3} => 숫자 2~3개로 시작하고,
    • - => 다음에 하이픈(-)이 오고
    • \d{3, 4} => 다음에 숫자가 3~4개 오고,
    • - => 다음에 하이픈(-)이 오고,
    • \d{4} => 다음에 숫자가 4개 온다.
    • g => 매칭되는 것을 모두 찾는다.
  3. 이메일주소 정규표현식: xxx@xxxx.com 등의 형식입니다. 
    const text = "대나무 빨대 구입 문의 : http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com"; text.match(/[\w\-\.]+\@[\w\-\.]+/g); // [ 'curryyou@aaa.com' ]

정규표현식에 변수 넣기 

const regex = new RegExp("ReGeX" + variable + "ReGeX", "gi");
...
string.replace(regex, "replacement");

다음과 같은 형태로 사용하면 됩니다. 구체적인 예시를 들어보겠습니다. m이라는 변수의 값 뒤에 #을 붙인 것과 m이라는 변수의 값을 모두 찾아서 배열에 넣어라. 라는 문제입니다.

const reg = new RegExp((m + "#") + "|" + m, "g");
const matchArr = str.match(reg);

console.log(reg) // /CCB#|CCB/g

다음과 같이 작성하면 됩니다.