정규표현식(regex) 매칭 과정을 단계별로 시각화합니다. 패턴 토큰 분석, 문자별 매칭 하이라이트, 캡처 그룹 표시, 프리셋 패턴으로 쉽게 학습하세요.
정규표현식(Regular Expression, regex)은 문자열에서 특정 패턴을 찾거나 치환하기 위한 형식 언어입니다. 예를 들어 \d+는 하나 이상의 숫자를, [a-z]+는 하나 이상의 소문자를 의미합니다. 프로그래밍, 텍스트 편집기, 데이터 처리 등에서 널리 사용됩니다.
탐욕적(greedy) 매칭은 가능한 한 많은 문자를 매칭합니다(기본값). 예: .*은 줄 전체를 매칭합니다. 게으른(lazy) 매칭은 ?를 붙여 가능한 한 적은 문자만 매칭합니다. 예: .*?는 최소한의 문자만 매칭합니다. HTML 태그 추출 시 <.*>는 탐욕적으로 첫 <부터 마지막 >까지 매칭하지만, <.*?>는 개별 태그만 매칭합니다.
캡처 그룹은 소괄호 ()로 감싼 부분입니다. 매칭된 텍스트의 특정 부분을 추출할 때 사용합니다. 예: (\d{3})-(\d{4})에서 010-1234를 매칭하면 그룹1은 010, 그룹2는 1234입니다. 역참조(\1, \2)로 앞서 매칭된 그룹을 다시 참조할 수도 있습니다.
정규표현식(Regular Expression, regex)은 문자열에서 특정 패턴을 찾거나 치환하기 위한 형식 언어입니다. 예를 들어 \d+는 하나 이상의 숫자를, [a-z]+는 하나 이상의 소문자를 의미합니다. 프로그래밍, 텍스트 편집기, 데이터 처리 등에서 널리 사용됩니다.
탐욕적(greedy) 매칭은 가능한 한 많은 문자를 매칭합니다(기본값). 예: .*은 줄 전체를 매칭합니다. 게으른(lazy) 매칭은 ?를 붙여 가능한 한 적은 문자만 매칭합니다. 예: .*?는 최소한의 문자만 매칭합니다. HTML 태그 추출 시 <.*>는 탐욕적으로 첫 <부터 마지막 >까지 매칭하지만, <.*?>는 개별 태그만 매칭합니다.
캡처 그룹은 소괄호 ()로 감싼 부분입니다. 매칭된 텍스트의 특정 부분을 추출할 때 사용합니다. 예: (\d{3})-(\d{4})에서 010-1234를 매칭하면 그룹1은 010, 그룹2는 1234입니다. 역참조(\1, \2)로 앞서 매칭된 그룹을 다시 참조할 수도 있습니다.
정규표현식 엔진 시각화 도구는 regex 패턴이 문자열을 매칭하는 과정을 단계별로 보여주는 교육 도구입니다. 패턴을 토큰 단위로 분해하여 각각의 의미를 한국어로 설명하고, 테스트 문자열의 각 위치에서 매칭 시도 결과를 색상으로 표시합니다. 이메일, 전화번호, IP 주소 등 실무에서 자주 쓰는 프리셋 패턴을 제공하며, 자동 재생 기능으로 매칭 과정을 애니메이션처럼 관찰할 수 있습니다.
정규표현식 엔진 시각화 도구는 regex 패턴이 문자열을 매칭하는 과정을 단계별로 보여주는 교육 도구입니다. 패턴을 토큰 단위로 분해하여 각각의 의미를 한국어로 설명하고, 테스트 문자열의 각 위치에서 매칭 시도 결과를 색상으로 표시합니다. 이메일, 전화번호, IP 주소 등 실무에서 자주 쓰는 프리셋 패턴을 제공하며, 자동 재생 기능으로 매칭 과정을 애니메이션처럼 관찰할 수 있습니다.
regex 패턴의 매칭 과정을 단계별로 시각화하고 토큰을 분석합니다
총 2개 매칭
"010-1234-5678"
"010-9876-5432"
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"]