정규식 시각화 FAQ

자주 묻는 7개 질문 · 자바스크립트 정규식 기준 · 일반 학습용 정보

작성 김지광 (운영자)감수 MDN·ECMAScript 명세 기반 정리마지막 업데이트 bal.pe.kr 마이크로 SaaS

자주 묻는 질문 (7)

정규식 시각화 도구는 어떻게 사용하나요?

상단 입력칸에 정규식을 적고 플래그 버튼(g, i, m 등)을 켜면, 오른쪽에 railroad 다이어그램과 토큰별 한국어 설명이 즉시 나타납니다. 아래 테스트 영역에 문자열을 입력하면 매칭된 부분이 실시간으로 하이라이트됩니다. 예제 버튼으로 이메일·휴대폰·날짜 패턴을 바로 불러올 수도 있습니다.

railroad(철도) 다이어그램은 어떻게 읽나요?

왼쪽 원에서 출발해 오른쪽 원까지 선을 따라가면 매칭 흐름이 됩니다. 갈라지는 선은 대안(|), 위로 넘어가는 선은 생략 가능(?, *), 아래로 되돌아오는 고리는 반복(+, *)을 뜻합니다. 점선 사각형은 그룹이며 라벨에 그룹 번호나 전·후방탐색 종류가 표시됩니다.

입력한 정규식과 문자열이 서버로 전송되나요?

아니요. 모든 파싱·매칭은 100% 브라우저에서만 실행되며 어떤 데이터도 서버로 전송하지 않습니다. 입력값은 편의를 위해 브라우저 로컬 저장소와 공유 링크 토큰(?s=)에만 보관됩니다. 따라서 민감한 문자열로 테스트해도 외부로 나가지 않습니다.

ReDoS(정규식 폭발)는 무엇이고 어떻게 막나요?

ReDoS 는 (a+)+ 같은 중첩 반복 패턴이 특정 입력에서 기하급수적으로 느려지는 현상입니다. 이 도구는 그런 중첩 무한 반복 패턴을 탐지하면 실시간 테스트 실행을 자동으로 건너뛰고 경고를 표시합니다. 또한 입력 길이(5,000자)와 매칭 수에 상한을 두어 브라우저가 멈추지 않게 보호합니다.

어떤 정규식 문법을 지원하나요?

자바스크립트(ECMAScript) 정규식을 기준으로 문자클래스([a-z], [^0-9]), 단축표기(\d, \w, \s), 수량자(*, +, ?, {n,m}와 lazy ?), 그룹(캡처·비캡처·이름·전후방탐색), 앵커(^, $, \b), 대안(|), 역참조를 지원합니다. 다이어그램과 설명은 이 문법을 그대로 따릅니다.

캡처 그룹 결과는 어디서 확인하나요?

테스트 영역에서 매칭이 있고 패턴에 괄호 그룹이 있으면, 하이라이트 아래에 매칭별 표가 나타나 전체 매칭과 각 그룹 값을 보여줍니다. 이름 있는 그룹 (?<name>...) 도 값이 추출되며, 그룹이 매칭되지 않은 경우 가운뎃점(·)으로 표시됩니다.

다이어그램을 저장하거나 공유할 수 있나요?

네. "SVG 저장" 버튼으로 다이어그램을 벡터 이미지(.svg)로 내려받을 수 있고, "링크 복사" 버튼으로 현재 정규식·플래그·테스트 문자열이 담긴 공유 링크를 만들 수 있습니다. 그 링크로 접속하면 동일한 상태가 자동으로 복원됩니다.