정규표현식 엔진 시각화
regex 패턴의 매칭 과정을 단계별로 시각화하고 토큰을 분석합니다
//g
플래그:
속도:500ms
0 / 35
패턴 토큰 분석
0"0" 문자
1"1" 문자
0"0" 문자
-"-" 문자
\d숫자 (0-9)
{4}정확히 4회
-"-" 문자
\d숫자 (0-9)
{4}정확히 4회
리터럴
이스케이프
문자 클래스
수량자
앵커
그룹
택일
특수
문자열 매칭 시각화
연락처:·010-1234-5678·또는·010-9876-5432
매칭됨 현재 위치 실패
매칭 결과
총 2개 매칭
매칭 #1위치 5~17
"010-1234-5678"
매칭 #2위치 22~34
"010-9876-5432"
JavaScript 코드
const regex = /010-\d{4}-\d{4}/g;
const str = "연락처: 010-1234-5678 또는 010-9876-5432";
const matches = str.matchAll(regex);
// => ["010-1234-5678","010-9876-5432"]정규표현식 엔진 시각화란?
정규표현식 엔진 시각화 도구는 regex 패턴이 문자열을 매칭하는 과정을 단계별로 보여주는 교육 도구입니다. 패턴을 토큰 단위로 분해하여 각각의 의미를 한국어로 설명하고, 테스트 문자열의 각 위치에서 매칭 시도 결과를 색상으로 표시합니다. 이메일, 전화번호, IP 주소 등 실무에서 자주 쓰는 프리셋 패턴을 제공하며, 자동 재생 기능으로 매칭 과정을 애니메이션처럼 관찰할 수 있습니다.
정규표현식 학습 팁
- 기본 메타문자부터: . * + ? [] () 등 기본 메타문자의 의미를 먼저 익히세요. 이것만으로도 대부분의 패턴을 읽을 수 있습니다.
- 프리셋으로 시작: 이메일, 전화번호 등 익숙한 패턴의 정규표현식을 분석해보면 문법이 빠르게 이해됩니다.
- 단계별 관찰: 이 도구의 단계별 실행 기능을 활용하여 엔진이 각 문자를 어떻게 처리하는지 관찰하세요.
- 캡처 그룹 활용: 괄호 ()를 사용하면 매칭된 텍스트의 특정 부분만 추출할 수 있어 데이터 파싱에 유용합니다.