본문으로 건너뛰기
Ink·tab

정규식 → 트리 구조 + 설명

복잡한 정규식의 구조를 트리로 풀어 각 부분이 무엇인지 한국어로 설명합니다.

구조 트리캡처 그룹 3개
  • SEQUENCE여러 항목을 순서대로 (시퀀스)
  • ├─ ANCHOR ^줄/입력의 시작
  • ├─ GROUP #11번째 캡처 그룹
  • └─ QUANTIFIER {3}3~3회 반복 (greedy)
  • └─ ESCAPE \d숫자 한 글자 (0~9)
  • ├─ LITERAL "-"문자 "-" 그대로
  • ├─ GROUP #22번째 캡처 그룹
  • └─ QUANTIFIER {2}2~2회 반복 (greedy)
  • └─ ESCAPE \d숫자 한 글자 (0~9)
  • ├─ LITERAL "-"문자 "-" 그대로
  • ├─ GROUP #33번째 캡처 그룹
  • └─ QUANTIFIER {4}4~4회 반복 (greedy)
  • └─ ESCAPE \d숫자 한 글자 (0~9)
  • └─ ANCHOR $줄/입력의 끝

브라우저 안에서만 처리됩니다. 네트워크 전송 없음.

언제 쓰나

남이 쓴 정규식을 그대로 받아 의미를 빠르게 풀어볼 때, 자기가 쓴 패턴이 의도한 구조 가 맞는지 점검할 때, 정규식 학습 중 quantifier · 그룹 · alternation 의 우선순위를 시각적으로 확인할 때.

입력 → AST 트리

상단에 정규식 (선택적으로 flag) 을 입력하면 즉시 AST 트리로 풀립니다. 각 노드는 깊이 들여쓰기와 box-drawing 문자 (├ └ │) 로 부모-자식 관계를 표시 — 한국어 narrative 가 옆에 함께.

SEQUENCE
├─ ANCHOR ^                 — 줄/입력의 시작
├─ GROUP #1
│  └─ QUANTIFIER {3}        — 정확히 3회 반복 (greedy)
│     └─ ESCAPE \d          — 숫자 한 글자 (0~9)
├─ LITERAL "-"              — 문자 "-" 그대로
├─ GROUP #2
│  └─ QUANTIFIER {2}        — 정확히 2회 반복 (greedy)
│     └─ ESCAPE \d
├─ LITERAL "-"
├─ GROUP #3
│  └─ QUANTIFIER {4}
│     └─ ESCAPE \d
└─ ANCHOR $                 — 줄/입력의 끝

regex-tester 와 차이

| 도구 | 묻는 질문 | |---|---| | regex-tester | "이 패턴이 어디에 매치되는가?" — 텍스트와 패턴 비교, 매치/캡처 추출. | | regex-visualizer | "이 패턴이 무엇을 의미하는가?" — 패턴 자체의 구조 풀이. |

디버깅 흐름: 의도 모호한 패턴 → visualize 로 의도 확인 → tester 로 매치 검증. 본 도구의 우상단 "→ Regex tester 로" 버튼이 패턴 + flag 를 그대로 넘겨줍니다.

지원 문법

  • 시퀀스
  • alternation |
  • 캡처 그룹 () · 비캡처 그룹 (?:)
  • 문자 클래스 [...] · 음수 [^...]
  • 모든 escape (\d \D \w \W \s \S \b \B \n \t \r \f \v \0 + 임의 문자 escape \. \+ \()
  • anchor ^ $
  • . (모든 한 글자)
  • quantifier * + ? {n} {n,} {n,m} (greedy / lazy ? 모두)

미지원 (V1)

다음은 UNSUPPORTED 노드로 보존 — 트리에 빨갛게 표시:

  • lookahead (?=) · lookbehind (?<=) · negative (?!) (?<!)
  • 명명 그룹 (?<name>)
  • backreference \1 · \k<name>
  • inline flag (?i)

V2 deeper expansion 검토. 미지원 패턴이 있어도 주변 구조는 정상 파싱 — 어디가 unsupported 인지 한눈에 보입니다.

보안

사내 시스템 데이터 검증용 정규식 · 미공개 패턴 라이브러리 · 디버깅 중인 패턴 모두 외부로 전송되지 않습니다. AST 파싱은 자체 구현 — 외부 lib 0KB, 외부 호출 0.

안 맞는 경우

  • railroad SVG 다이어그램 — V1 은 텍스트 트리. SVG railroad 는 layout 산수가 무거워 V2 deeper expansion.
  • PCRE / Python re 등 다른 엔진 — JavaScript regex 문법 기준. PCRE 의 \K [[:alpha:]] 같은 확장 미지원.
  • 정규식 최적화 제안 — 본 도구는 구조 풀이 만, ReDoS 위험 / 성능 최적화 제안은 별개 (regex101 등 별도 도구).

정규식은 페이지 안에서만

사내 시스템 데이터 검증용 정규식 · 미공개 패턴 라이브러리 · 디버깅 중인 패턴 모두 외부로 전송되지 않습니다. AST 파싱은 자체 구현 — 외부 lib 0KB, 외부 호출 0.

자주 묻는 질문

regex-tester 와 어떻게 다른가요?
regex-tester 는 *매치* 도구 — 패턴이 입력 텍스트의 어디에 매치되는지 찾고 캡처 그룹 추출. regex-visualizer 는 *구조* 도구 — 패턴 자체를 트리로 풀어 각 부분이 무엇을 의미하는지 설명. 디버깅 흐름은 보통 visualize → 의도 확인 → tester 로 보내 매치 검증.
어떤 문법을 지원하나요?
JavaScript regex 의 핵심: 시퀀스 · alternation `|` · 캡처 그룹 `()` · 비캡처 그룹 `(?:)` · 문자 클래스 `[...]` · 음수 클래스 `[^...]` · 모든 escape (`\d \D \w \W \s \S \b \B \n \t \r` 등) · anchor `^ $` · `.` · quantifier `* + ? '{n}' '{n,}' '{n,m}'` (greedy 와 lazy `?` 모두).
지원 안 하는 건?
lookahead `(?=)` · lookbehind `(?<=)` · negative lookaround `(?!)` `(?<!)` · 명명 그룹 `(?'<name>')` · backreference `\1` `\k'<name>'` · inline flag `(?i)`. 이 패턴들은 `UNSUPPORTED` 노드로 보존 — 트리에 빨갛게 표시되어 알 수 있습니다. V2 확장 검토.
regex flag (i · g · m 등) 이 시각화에 영향이 있나요?
아니요. flag 는 *매칭 시점* 에 적용되고 *구조* 에는 영향 없음. 본 도구는 구조만 — flag 는 정보 표시용으로만 받습니다 (regex-tester 로 보낼 때 함께 전달).
왜 railroad diagram 이 아니라 텍스트 트리인가요?
railroad SVG 는 alternation 분기 · group 중첩 · quantifier 라벨 등 layout 산수가 무거워 V1 범위에서 정직하게 다루기 어렵습니다. 텍스트 트리는 동일한 구조 정보를 깔끔하게 — depth · 부모-자식 관계 · 노드 종류 색 코딩. SVG 는 V2 deeper expansion.