가장 많은 시간을 들인 regex 는 내가 쓰지 않은 것이었다. 그것은 4 살이었고,검증 레이어에 앉아 있었고,고양이가 키보드를 가로 질러 걸어간 것처럼 보였다: 중첩 된 그룹,시선, 두 개의 문자 클래스,그리고 a {2,} 끝에 숨어있는. 지원 티켓은 유효한 입력을 거부한다고 말했고,내가 그것을 고치기 전에 나는 그것을 이해해야했다,이는 정신적으로 패턴을 통해 엔진을 한 번에 하나의 토큰으로 실행하는 것을 의미했다. 그것은 모든 개발자가 익숙하지 않은 regex 에 지불하는 세금이며,정확히 세금입니다 정규식 설명자 on Toolz.dev 는 제거하도록 만들어졌습니다. 이 가이드는 정규식을 디코딩하는 대신 정규식을 읽는 방법과 토큰별 분석이 기호 벽을 일반 코드처럼 검토할 수 있는 것으로 바꾸는 방법에 관한 것입니다.
TL;DR: 정규식 설명자는 정규식을 구문 분석하고 엔진이 읽는 순서대로 각 부분을 일반 영어로 설명합니다: 앵커, 문자 클래스, 수량자, 그룹, 둘러보기 및 이스케이프, 모두 레이블이 지정되고 들여쓰기되어 중첩된 구조가 표시됩니다 정규식 설명자 실제 JavaScript 엔진으로 패턴을 검증하고 아무것도 업로드하지 않은 채 브라우저에서 전체 분석을 수행합니다.
regex 설명자 란 무엇입니까?
정규식 설명자는 정규식을 가져와서 한 번에 하나의 구문으로 읽을 수 있는 설명으로 번역합니다. 쳐다보는 대신 ^(?<user>[a-z0-9._%+-]+)@ 그리고 머릿속에서 그 의미를 재구성하면,순서화된 목록을 얻게 됩니다: 이것은 문자열 시작 앵커이고,이것은 사용자라고 불리는 명명된 캡처 그룹이고,이것은 소문자,숫자, 점,퍼센트 기호,더하기, 하이픈과 일치하는 문자 클래스이고,이 수량자는 하나 이상의 패턴을 바꾸지 않았지만,이것을 이해하는 노력이 머리에서 도구로 옮겨갔습니다.
값은 정규식이 의도적으로 컴팩트하다는 사실에서 비롯됩니다. 모든 기호는 의미를 전달하며 동일한 인텐트는 여러 가지 다른 방식으로 작성할 수 있으므로 함수를 훑어보는 방식으로 패턴을 훑어볼 수 있는 신뢰할 수 있는 방법이 없습니다. 단일 길 잃은 백슬래시는 문자 그대로의 점을 "any character,"로 변경하고 게으른 것을 원하는 탐욕스러운 수량자는 그룹이 캡처하는 텍스트를 변경합니다. 정규식을 올바르게 읽는 것은 엔진을 시뮬레이션하는 것을 의미하며,엔진을 손으로 시뮬레이션하는 것은 느리고 오류가 발생하기 쉽습니다. 설명자는 해당 시뮬레이션을 수행하고 결과를 보여줍니다.
Toolz.dev 에서 흐름은 짧습니다. 주변 슬래시 없이 패턴을 붙여넣고,사용하는 플래그를 전환하면 고장이 즉시 나타납니다. 중첩된 그룹은 들여쓰기되어 패턴의 모양이 한 눈에 보이고 각 플래그는 문맥에 따라 설명되므로 구문뿐만 아니라 전체 일치 항목을 어떻게 변경하는지 이해할 수 있습니다.
설명자는 정규식 테스터와 어떻게 다릅니까?
이 두 도구는 서로 다른 질문에 답하며,필요한 것을 알면 시간이 절약됩니다. regex 테스터는 샘플 텍스트에 대해 패턴을 실행하고 일치하는 것을 보여줍니다: 강조 표시된 일치,캡처 그룹 및 모든 오류에 대한 답변 "does this pattern does what I want on this input." An explainer describes what the pattern means without any test input at all. "what is this pattern actually saying."
regex 가 데이터가 아니라 미지수일 때 설명자를 찾습니다. 유효성 검사 패턴을 추가하는 풀 요청을 검토하거나 문서화되지 않은 표현식으로 가득 찬 코드베이스를 상속하거나 포럼에서 복사한 답변을 이해하려고 하는 것은 모두 패턴이 있고 신뢰하기 전에 패턴이 무엇을 하는지 알아야 하는 경우에 도달합니다 정규식 테스터 이미 패턴을 이해하고 실제 예제에 대한 동작을 확인하고 싶을 때. 실제로 두 가지는 한 쌍으로 작동합니다: 패턴을 이해하기 위해 패턴을 설명한 다음 테스트하여 증명하십시오. 테스터와 설명자는 정확히 그 이유로 Toolz.dev 에서 서로 옆에 앉습니다.
가족 중에 이름을 붙일 가치가 있는 세 번째 도구가 있습니다. The 정규식 빌더 처음부터 시작할 때 구성 요소와 템플릿에서 패턴을 조립합니다. 빌드,설명, 테스트: 이 세 가지는 정규식을 사용하여 작업하는 전체 수명 주기를 다루며,쓰지 않은 것을 아직 이해할 필요가 없는 것을 쓰는 것부터 다룹니다.
실제로 고장이 보여주는 것은 무엇입니까?
설명자는 패턴을 왼쪽에서 오른쪽으로 이동하고 엔진이 만나는 순서대로 구성당 하나의 레이블이 지정된 선을 방출합니다. 정규식을 순차적으로 읽고 토큰을 순서대로 보는 것은 실제로 일치가 진행되는 방식을 반영하기 때문에 순서가 중요합니다.
앵커는 대부분의 패턴에서 우선입니다. The ^ 그리고 $ 기호는 문자와 일치하지 않습니다; 그들은 위치, 문자열의 시작과 끝 또는 다중 라인 플래그가 설정될 때 각 줄의 시작과 끝을 주장합니다. 설명자는 이 이중 동작을 기록하므로 아래에서 다르게 동작하는 앵커에 결코 놀라지 않습니다 m 플래그.
대괄호로 작성된 문자 클래스는 집합에서 그려진 단일 문자를 설명합니다. 설명자는 집합을 단어로 확장합니다: ranges like a-z become "the range a to z,"처럼 속기 탈출 \d become "a digit," and leading caret becomes "not" 인 모든 문자; 나열된 집합. 와 같은 밀집 클래스 [a-zA-Z0-9._%+-] 퍼즐 대신 일반 목록으로 읽습니다.
수량자는 미묘한 벌레가 사는 곳이기 때문에 자신만의 선을 얻습니다. A * 는 0 이상,입니다 + 는 하나 이상, ? 는 0 또는 1이고, 그리고 {n,m} 는 명시적 범위입니다. 결정적으로 설명자는 게으른 수량자,후행으로 작성된 수량자를 플래그 지정합니다 ? 등의 +? 또는 *?탐욕스러운 것과 게으른 것의 차이는 패턴이 다른 곳에서 눈에 보이는 문자 하나도 변경하지 않고 캡처하는 텍스트를 변경하기 때문입니다.
그룹 및 둘러보기는 중첩을 표시하기 위해 들여쓰기됩니다. 캡처 그룹,캡처하지 않는 그룹,이름이 지정된 그룹 및 네 가지 둘러보기 유형 모두 각각 수행하는 작업에 대한 설명을 얻고 그 안에 있는 하위 패턴은 한 단계 들여쓰기되어 구조가 평평한 기호 실행이 아닌 중첩된 윤곽선처럼 읽혀집니다.
다음은 설명자가 말하는 내용에 대한 공통 구성의 매핑 방법입니다:
| 건설하다 | 예 | 설명자가 말하는 것 |
|---|---|---|
| 앵커 | ^ |
문자열 시작(또는 m 플래그가 있는 줄 시작) |
| 캐릭터 클래스 | [a-z] |
a 부터 z 까지의 단일 문자 |
| 속기 | \d |
숫자 0부터 9까지 |
| 수량자 | {2,} |
2 회 이상 반복 |
| 게으른 수량자 | +? |
한 번 이상 반복, 가능한 한 적게 |
| 캡처 그룹 | (...) |
재사용을 위해 저장된 캡처 그룹 시작 |
| 명명된 그룹 | (?<id>...) |
명명된 캡처링 그룹의 시작 "id" |
| 미리보기 | (?=...) |
동봉된 패턴은 따라야 하지만 소비되지는 않습니다 |
| 역참조 | \1 |
캡처한 동일한 텍스트 그룹 1과 일치합니다 |
설명은 에서 사용된 용어를 따릅니다 MDN 정규식 참조따라서 단일 구성에 대해 더 자세히 읽고 싶다면 분석의 단어가 검색할 단어입니다.
맛이 왜 중요합니까?
정규 표현식은 하나의 언어가 아니다; 밀접하게 관련된 것들의 계열이다. 자바스크립트,PCRE (PHP 와 많은 도구들에 의해 사용됨), Python's re 모듈,Java, 닷넷은 모두 핵심 문법을 공유하지만 가장자리에서 갈라지고,그 가장자리는 혼란이 번식하는 곳입니다. Regex Explainer 는 JavaScript 정규 표현식,브라우저 및 Node.js 에서 사용하는 풍미를 설명합니다. 왜냐하면 도구가 검증하는 것과 대부분의 웹 개발자가 실제로 실행하는 것이기 때문입니다.
공유 코어는 크고 신뢰할 수 있습니다. 문자 클래스, 공통 수량자, 교대로 |, 그룹화, 앵커 및 표준 약어와 같습니다 \d 그리고 \w 모든 곳에서 같은 의미. 패턴이 그것들만 사용한다면,결국 실행할 언어에 상관없이 설명은 정확하다. 발산은 고급 기능에 있다: lookbehind 지원은 자바스크립트에 늦게 도착했고 PCRE 와는 다르며,네임드 그룹 문법은 맛에 따라 다르며,일부 엔진은 자바스크립트가 전혀 가지고 있지 않은 재귀 또는 소유 수량자를 지원한다.
실용적인 규칙은 간단합니다. 공유된 구성에 대한 설명을 권위 있는 것으로 취급하고,타겟 언어에 대한 문서와 비교하여 모든 flavor-specific 확장을 다시 확인하십시오. 설명자가 실제 JavaScript 엔진으로 패턴을 먼저 검증하기 때문에 JavaScript 가 지원하지 않는 구성은 잘못된 설명이 아닌 오류로 표면화되며,이는 더 안전한 실패입니다. 만약 여러분이 제가 하는 방식대로 스택을 가로질러 작업하고 있다면,PHP 백엔드와 JavaScript 프론트엔드 사이를 이동하면서 flavor 에 대해 명시적이면 한 곳에서 작동했던 패턴이 다른 곳에서 조용히 잘못 작동하는 버그 클래스를 저장합니다.
실제 패턴을 어떻게 읽나요?
도구가 기본적으로 로드하는 샘플, 이메일 모양의 패턴을 가져옵니다: ^(?<user>[a-z0-9._%+-]+)@(?<domain>[a-z0-9.-]+\.[a-z]{2,})$ 대소문자를 구분하지 않는 플래그로요. 그 자체로 한입 가득입니다. 설명자를 통해 실행하면 짧고 읽기 쉬운 윤곽선으로 분해됩니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 ^ 문자열의 시작을 주장합니다. 첫 번째 명명된 그룹인 user 는 소문자,숫자 및 주소의 로컬 부분에서 일반적으로 허용되는 구두점의 클래스에서 하나 이상의 문자를 캡처합니다. 그런 다음 리터럴 @. 두 번째로 명명된 그룹인 도메인은 하나 이상의 문자,숫자, 점 또는 하이픈을 캡처하고,그 뒤에 리터럴 도트와 두 개 이상의 문자가 실행되며,이는 최상위 도메인입니다. 마지막으로 $ 문자열의 끝을 주장합니다. The i 플래그는 경우에 관계없이 모든 것이 일치함을 의미하므로 소문자 전용 클래스는 여전히 대문자 입력을 허용합니다.
그렇게 읽으세요,원시 패턴에서는 보이지 않는 두 가지가 튀어나옵니다. 첫째,the {2,} 최상위 도메인에서 패턴은 두 개 이상의 문자로 구성된 모든 TLD를 허용한다는 의미입니다. 이는 최신 도메인에는 정확하지만 라틴어가 아닌 문자로 작성된 국제화된 TLD를 거부합니다. 둘째, 앵커는 패턴이 전체 문자열과 일치해야 함을 의미하므로 더 큰 텍스트 내에서 주소를 찾는 대신 전체 주소를 검증합니다. 이는 검증 정규식이 너무 엄격한지 너무 느슨한지를 결정하는 세부 사항의 종류이며 원본에서는 놓치기 쉽지만 분석에서는 분명합니다.
패턴을 이해하고 나면,종종 그걸로 뭔가를 하고 싶어하죠. 만약 그것이 찾고 바꾸기 패턴이라면,the Regex 교체 도구는 역참조 지원으로 대체를 실행합니다. 추출 패턴인 경우 이메일 추출기 대량 텍스트에 일치하는 이메일의 정확히이 종류의 큐레이팅 된 버전을 적용합니다. 설명자는 읽기 단계입니다; 이들은 행동 단계입니다.
이걸 실제로 언제 쓰게 될까요?
코드 리뷰는 제가 가장 많이 친 경우입니다. 팀원은 유효성 검사 레이어나 로그 파서에 정규식을 추가하고 diff 는 코멘트가 없는 기호 줄을 보여줍니다. 설명기에 붙여 넣으면 5 분간의 응시가 10 초의 읽기로 바뀌고 고전적인 리뷰가 놓친 것을 포착합니다: 어떤 캐릭터와도 일치하는 이스케이프되지 않은 점,너무 많이 캡처하는 탐욕스러운 수량자,반대여야 할 때 존재하거나 부재하는 앵커. 다음 사람을 위한 패턴을 무료로 문서화하는 주석으로 풀 요청에 고장을 붙여 넣기 시작했습니다.
학습은 그 다음입니다. 정규식은 매일 사용하지 않는 한 완전히 붙지 않는 기술 중 하나이며 몇 달 후에 다시 돌아 오는 것은 항상 구문을 다시 배우는 것을 의미합니다. 설명자와 함께 실제 패턴을 읽는 것은 튜토리얼을 다시 읽는 것보다 빠른 방법입니다. 왜냐하면 구조물을 격리 된 예제가 아니라 실제 작업을 수행하는 컨텍스트에서 볼 수 있기 때문입니다. 시간이 지남에 따라 설명은 내부화 되었기 때문에 불필요 해집니다. 이것이 요점입니다.
디버깅은 루프를 닫습니다. 패턴이 잘못된 것과 일치하면,설명은 종종 테스트 입력에 도달하기도 전에 그 이유를 밝힙니다. 게으르면 될 때 탐욕스러운 수량자,잊은 문자를 포함하는 문자 클래스,패턴이 하위 문자열과 일치하도록 하는 누락된 앵커: 이 모든 것은 분석 옆에 설명자를 유지합니다 정규식 테스터 그래서 나는 같은 자리에서 설명하고 테스트할 수 있으며, 둘 다 내가 설명한 더 넓은 키트에 살고 있습니다 웹 개발자 툴킷 가이드.
비공개이며 오프라인에서도 작동하나요?
두 가지 모두에 예,그리고 같은 이유로. 전체 고장은 브라우저 내부에서 JavaScript 로 계산됩니다. 패턴은 서버로 전송되지 않으며 아무것도 기록되지 않으며 페이지가 로드되면 도구가 계속 작동하여 연결이 비활성화된 상태로 네트워크 탭을 열거나 오프라인으로 전환하여 계속 작동하는 것을 확인하여 확인할 수 있습니다.
이것은 정규 표현식 특히 보일 수있는 것보다 더 중요합니다. 패턴은 종종 민감한 형식과 일치하도록 작성됩니다: 내부 식별자,API 키 모양,계정 번호 레이아웃 또는 개인 데이터의 구조. 서버 측 도구에 그 중 하나를 붙여 넣는 것은 데이터 형식에 대한 설명을 제 3 자에게 전달하는 것을 의미합니다. 분석 클라이언트 측을 유지한다는 것은 패턴이 컴퓨터에 유지된다는 것을 의미하며,이는 Toolz.dev 의 모든 도구 뒤에있는 동일한 개인 정보 우선 원칙이며,내가 더 자세히 쓴 것입니다 데이터 개인정보 보호 가이드.
자주 묻는 질문
복잡한 정규식을 어떻게 이해합니까?
패턴을 설명자에 붙여넣고 토큰별 분석을 읽어보세요. 엔진이 적용한 순서대로 각 구성을 일반 영어로 설명합니다. 중첩된 그룹은 들여쓰기되어 구조를 볼 수 있습니다. 이렇게 하면 정신적으로 엔진을 시뮬레이션하는 것이 레이블이 지정된 목록을 읽는 것만으로 바뀌며,이는 더 빠르고 오류 발생 가능성이 훨씬 적습니다.
정규식 설명기와 정규식 테스터의 차이점은 무엇입니까?
정규식 설명자는 테스트 입력 없이 패턴이 무엇을 의미하는지 설명하고 정규식 테스터는 샘플 텍스트에 대해 패턴을 실행하고 일치하는 것을 보여줍니다. 설명기를 사용하여 익숙하지 않은 패턴을 이해하거나 문서화한 다음 테스터를 사용하여 실제 데이터에 대해 예상대로 동작하는지 확인합니다. 그들은 다른 질문에 답하고 한 쌍으로 잘 작동합니다.
설명자는 어떤 정규식 맛을 설명합니까?
브라우저와 Node.js 에서 사용하는 flavor 인 JavaScript (ECMAScript) 정규식을 설명합니다. 문자 클래스,수량자, 그룹 및 앵커를 포함한 대부분의 구문은 PCRE,Python 및 Java 와 공유되므로 핵심 설명은 언어 간에 정확합니다. lookbehind 및 named-group 구문과 같은 풍미별 기능은 다를 수 있으므로 대상 언어에 대해 이를 확인하십시오.
탐욕과 게으른 수량자의 차이점은 무엇입니까?
+ 또는 *와 같은 탐욕스러운 수량자는 역추적하기 전에 가능한 한 많은 텍스트와 일치하는 반면, +? 또는 *?와 같은 동일한 기호 뒤에 오는 동일한 기호는 가능한 한 적게 일치합니다. 설명자는 게으른 수량자에 명시적으로 레이블을 지정합니다. 왜냐하면 차이는 패턴이 다른 곳에서 눈에 보이는 문자를 변경하지 않고 캡처하는 텍스트를 변경하기 때문입니다.
설명자가 Lookheadhead와 Lookehind를 처리할 수 있습니까?
예. 긍정적이고 부정적인 lookahead,written (?=...) and (?!...), 그리고 긍정적이고 부정적인 lookbehind,written (?<=...) and (?<!...) 는 각각 그들이 주장하는 것으로 레이블이 지정되고 다른 그룹처럼 들여쓰기됩니다. Lookarounds 는 텍스트가 성냥에 포함하지 않고 위치에 표시되거나 나타나지 않는지 확인합니다. 이는 설명이 명시적으로 만듭니다.
설명자가 내 패턴이 잘못되었다고 말하는 이유는 무엇입니까?
패턴은 실제 RegExp 엔진으로 컴파일되기 전에 설명되므로 불균형 브래킷 또는 괄호, 잘못된 이스케이프 또는 알 수없는 플래그가 engine's 정확한 오류 메시지와 함께보고됩니다.보고 된 문제를 수정하면 대부분 누락 된 닫는 괄호 또는 브래킷이 나타나고 고장이 나타납니다.
개인 데이터와 일치하는 정규식을 붙여넣는 것이 안전합니까?
예. 패턴은 브라우저 내부의 JavaScript 에서 완전히 분석됩니다. 서버로 전송되지 않으며,기록되지 않으며,페이지가 로드되면 도구가 연결이 비활성화된 상태에서 작동합니다. 개인 코드베이스 또는 개인 또는 독점 형식과 일치하는 패턴에서 패턴을 안전하게 설명할 수 있습니다.
이것은 regex 빌더와 어떻게 다른가요?
regex 빌더는 처음부터 시작할 때 구성 요소와 템플릿에서 새로운 패턴을 구성하는 데 도움이 되는 반면,설명자는 이미 가지고 있는 패턴을 설명합니다. 두 가지는 상호 보완적입니다: Regex 빌더로 패턴을 구축하고,설명자로 기존 패턴을 이해하고,Regex 테스터로 실제 입력에 대해 둘 중 하나를 확인합니다.
무료와 함께 자신의 패턴을 읽어보세요 정규식 설명자. 그것은 정규 표현식을 아래로 토큰을 일반 영어로, 완전히 브라우저에서, 아무것도 업로드하지 않고.
