regex가 브라우저에서 어떻게 동작하나요?
모든 JavaScript 런타임은 네이티브 정규 표현식 엔진을 제공합니다 — new RegExp(pattern, flags)가 패턴을 컴파일하고, 이어 String.prototype.match, String.prototype.replace, RegExp.prototype.exec 같은 메서드가 임의의 입력 문자열에 대해 이를 실행합니다. 이 테스터는 그 엔진을 UI로 감싸 브라우저를 떠나지 않고 패턴을 편집, 실행, 검사할 수 있게 합니다. 입력하는 어떤 것도 — 패턴, 플래그, 테스트 문자열 또는 치환 — 네트워크로 전송되지 않습니다.
regex 테스터는 어떻게 동작하나요?
파이프라인은 몇 가지 짧은 단계로 구성되며, 모두 매 키 입력마다 클라이언트 측에서 실행됩니다 (입력을 부드럽게 유지하기 위해 150 ms 디바운스 적용):
- 패턴 본문은 위의 필드에서 읽힙니다 (앞이나 끝에
/구분자 없음 — 장식일 뿐). 선택된 플래그 알약들은gi또는gimsuy같은 플래그 문자열로 이어붙입니다. new RegExp(patternBody, flags)가 패턴을 컴파일합니다. 엔진이SyntaxError를 던지면(예: 짝이 맞지 않는 괄호나 잘못된 이스케이프) 메시지가 테스트 문자열 위에 표시되고 일치 목록은 비워집니다. 컴파일 오류는 V8 / SpiderMonkey / JavaScriptCore의 실제err.message이므로 DevTools에서 보는 것과 동일합니다.- 일치 목록의 경우, 테스터는 항상 합성된 global 플래그로 열거합니다 — 따라서
g를 꺼도 목록에는 모든 일치가 표시됩니다. 폭 0 일치에 대한 표준 가드(if (m.index === rx.lastIndex) rx.lastIndex++)는 빈 문자열에 일치하는 패턴에서 루프가 계속 도는 것을 막습니다. 치환 모드는 실제 플래그 집합을 존중하므로$&는String.prototype.replace와 동일하게 동작합니다. - 각 반복 사이에 테스터는
performance.now() - start를 확인하고 50 ms가 지나면 중단합니다. 이로써(a+)+$같은 입력에서 긴a연속에 대한 파국적 백트래킹을 방지합니다 — 그러지 않으면 탭이 멈춥니다. 가드는 베스트 에포트입니다: 단일 일치의 병적인 패턴은 한 번의exec호출 안에서도 시간을 소비할 수 있습니다. 그 경우 탭을 새로 고치고 비탐욕적 수량자나 원자적·소유적 스타일(예:[^x]*x)로 패턴을 다시 쓰세요. - 테스트 문자열은 각 일치의 범위에서 세그먼트로 분할되고, 일치된 세그먼트는
<mark class="rx-match rx-cap-N">요소로 감싸집니다. 여기서N은 6가지 팔레트 색상을 순환하여 인접한 일치를 한눈에 구분할 수 있게 합니다. 각 일치의 번호 그룹(m[1],m[2], …)과 이름 그룹(m.groups)은 아래에 라벨이 붙은 행으로 표시되며,d플래그가 설정된 경우 그룹별[start, end]인덱스도 표시됩니다.
왜 이 regex 테스터를 사용해야 하나요?
- 프라이버시: 모든 패턴, 테스트 문자열, 치환은 내장된 JavaScript RegExp 엔진을 사용해 브라우저에서 실행됩니다. 어떤 것도 탭을 벗어나지 않습니다 — 입력이 고객 로그, 유출된 자격 증명 패턴 등 호스팅 SaaS regex 놀이터에 붙여 넣고 싶지 않은 어떤 것일 때 특히 중요합니다.
- 정직한 방언: 테스터는 Node.js, Chrome, Safari, Firefox 및 브라우저 기반 폼 검증기들이 실행하는 정확한 regex 엔진을 그대로 노출합니다. 미묘한 차이를 숨기는 Perl 방언 번역 계층이 없습니다 — 여기서 동작하는 것은 당신의 코드에서도 동작합니다.
- 캡처와 이름 그룹 디버깅: 각 번호 그룹(
$1,$2, …)과 이름 그룹($<year>)이 일치마다 표시되어 파서를 만들고 슬롯을 추측 없이 읽을 수 있습니다. 치환 모드는 그룹을 자유롭게 조합할 수 있게 해 줍니다 —$2-$1은 처음 두 슬롯을 바꾸고,$<name>은 이름 슬롯을 끼워 넣으며,$&는 전체 일치를 그대로 출력합니다. - 파국적 백트래킹 가드: 열거에 대한 50 ms 상한이
(a+)+$같은 병적인 패턴이 탭을 얼리기 전에 중단시킵니다. 멈춘 브라우저 대신 설명적인 오류가 표시되고 페이지는 즉시 회복합니다.
regex 테스터의 일반적인 응용은 무엇인가요?
정규 표현식은 웹 개발, 보안, 데이터 작업에 등장합니다 — 이 테스터는 가장 일반적인 사용 사례를 대상으로 합니다:
- 폼 검증: 이메일, 전화, 우편번호 패턴을 프로토타이핑하고 샘플 입력을 테스트 문자열에 붙여 넣은 다음, 패턴을 운영 코드에 보내기 전에 모든 긍정 사례가 일치하고 모든 부정 사례가 일치하지 않는지 확인합니다.
- 로그 스크래핑: NGINX, 애플리케이션 또는 감사 로그 출력의 일부를 붙여 넣고, 관심 있는 부분에 대해 이름 그룹을 사용한 패턴을 작성합니다 (
(?<ip>…) (?<path>…)). 일치마다 캡처된 슬롯을 읽어 파서가 맞는지 확인합니다. - 리팩터용 검색 및 치환: 치환 모드를 사용해 스니펫의 식별자를 다시 씁니다 —
(\w+)\.set(\w+)\(→$1.$2 =는 세터 호출을 속성 할당으로 바꾸고, 라이브 미리 보기가 codemod에 커밋하기 전에 결과를 보여 줍니다.
regex 예시는 어떻게 생겼나요?
패턴 (\d{4})-(\d{2})-(\d{2})를 g 플래그와 함께 테스트 문자열 release 2025-11-15, prerelease 2026-05-25에 대해 실행합니다. 엔진은 두 개의 일치를 찾습니다. 첫 번째는 2025-11-15이고 그룹 1 = 2025, 그룹 2 = 11, 그룹 3 = 15입니다. 두 번째는 2026-05-25로 같은 그룹 형태입니다. 치환 모드에서 치환 템플릿 $3/$2/$1은 두 날짜를 각각 15/11/2025와 25/05/2026으로 다시 씁니다 — 단일 패턴 ISO에서 DMY로의 변환으로, 패턴을 스크립트에 연결하기 전에 시각적으로 확인할 수 있습니다.
패턴 구성, 디버깅, 또는 다시 쓰는 모든 regex 작업의 빠른 길로 이 테스터를 사용하세요. 모든 것이 로컬에서 실행되며, 아무것도 기록되지 않고, regex 엔진은 브라우저와 함께 제공된 엔진이므로 동작이 운영 코드의 런타임 동작과 일치합니다.