Bezpieczny tester gotowych wyrażeń

<main class="regex"><header><span class="bracket" aria-hidden="true">/</span><div><h1>Tester regex</h1><p>Wybierz wzór. Sprawdź dopasowanie.</p></div><span class="bracket" aria-hidden="true">/</span></header><div class="field"><label for="regex-pattern">Gotowe wyrażenie</label><select id="regex-pattern"><option value="postal">Polski kod pocztowy</option><option value="digits">Tylko cyfry</option><option value="email">Prosty adres e-mail</option><option value="word">Jedno słowo</option></select></div><code id="pattern-code">^[0-9]{2}-[0-9]{3}$</code><label for="regex-text">Tekst do sprawdzenia (maks. 120 znaków)</label><input id="regex-text" value="00-001" maxlength="120" autocomplete="off"><div id="regex-result" role="status"><span id="result-symbol" aria-hidden="true">✓</span><b id="result-text">Dopasowanie pełne</b></div><p class="note"></p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#1b2c2d;color:#e7f6ed;--accent:#99d2ae}.regex{max-width:650px}.regex header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.bracket{font:100px/1 Georgia,serif;color:#99d2ae}.regex h1{font-size:40px}.regex header p{margin:0}.regex code{display:block;background:#35514c;color:#fff;padding:15px;margin-bottom:20px;font-size:18px;overflow-wrap:anywhere}#regex-result{border-top:1px solid #7ca799;margin-top:25px;padding-top:18px;display:flex;align-items:center;gap:20px}#result-symbol{font-size:38px}#regex-result.bad{color:#ffd0c4}.regex .note{color:#c4d9d0}.regex label{font-size:14px}@media(max-width:560px){.regex h1{font-size:29px}.bracket{font-size:75px}.regex header{gap:12px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const patterns={postal:/^[0-9]{2}-[0-9]{3}$/,digits:/^[0-9]+$/,email:/^[^\s@]{1,64}@[^\s@.]{1,40}\.[a-zA-Z]{2,20}$/,word:/^[a-zA-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+$/};const update=()=>{const pattern=patterns[q('#regex-pattern').value],text=q('#regex-text').value.slice(0,120),match=pattern.test(text);q('#pattern-code').textContent=pattern.source;q('#result-text').textContent=match?'Dopasowanie pełne':'Brak pełnego dopasowania';q('#result-symbol').textContent=match?'✓':'×';q('#regex-result').classList.toggle('bad',!match);};q('#regex-pattern').onchange=update;q('#regex-text').oninput=update;update();})();