@extends('layouts.app')
@section('title', 'Regex Tester – Reguläre Ausdrücke live testen | kotsch.tech')
@section('meta_description', 'Reguläre Ausdrücke online testen und debuggen. Live-Highlighting, Match-Liste, Capture Groups, Ersetzung und Preset-Bibliothek – kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Regex Tester, Reguläre Ausdrücke, Regex online, Regex Debugger, Regex Match, Regex Test Tool">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.rx-highlight { background:#fef08a; border-radius:2px; }
.rx-highlight.rx-0 { background:#bbf7d0; }
.rx-highlight.rx-1 { background:#bfdbfe; }
.rx-highlight.rx-2 { background:#fde68a; }
.rx-highlight.rx-3 { background:#fecaca; }
.rx-highlight.rx-4 { background:#e9d5ff; }
.match-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:0.78rem; font-weight:700; border:1px solid var(--line); background:var(--bg); margin:3px; cursor:default; }
.match-idx { background:var(--accent); color:#fff; border-radius:999px; padding:1px 6px; font-size:0.7rem; }
.preset-chip { padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:0.78rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.preset-chip:hover { border-color:var(--accent); color:var(--accent); }
.group-row { display:flex; gap:8px; align-items:center; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:6px; font-size:0.82rem; }
.group-lbl { font-weight:700; color:var(--muted); flex-shrink:0; }
.group-val { font-family:'JetBrains Mono',monospace; word-break:break-all; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-search"></i> Developer</span>
        <h1 class="tool-h1">Regex<span> Tester.</span></h1>
        <p class="tool-sub">Reguläre Ausdrücke live testen – mit Highlighting, Matches, Groups und Ersetzung.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Regulärer Ausdruck</label>
            <div style="display:flex;gap:8px;align-items:center">
                <span style="font-size:1.2rem;font-weight:700;color:var(--muted)">/</span>
                <input type="text" class="t-input" id="rx-pattern" placeholder="z.B. \b\w+@\w+\.\w+\b" oninput="runRx()" style="font-family:'JetBrains Mono',monospace">
                <span style="font-size:1.2rem;font-weight:700;color:var(--muted)">/</span>
                <input type="text" class="t-input" id="rx-flags" value="g" oninput="runRx()" style="width:80px;font-family:'JetBrains Mono',monospace" placeholder="gim">
            </div>
        </div>
        <div class="t-error" id="rx-err" style="margin-bottom:10px"></div>

        <div class="t-field">
            <label class="t-label">Test-Text</label>
            <textarea class="t-textarea" id="rx-text" style="min-height:120px;font-family:'JetBrains Mono',monospace;font-size:0.85rem" oninput="runRx()" placeholder="Gib deinen Test-Text hier ein…"></textarea>
        </div>

        <div style="margin-top:6px">
            <div id="rx-highlighted" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;line-height:1.8;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);min-height:48px;white-space:pre-wrap;word-break:break-all;display:none"></div>
        </div>

        <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:12px">
            <span style="font-size:0.82rem;font-weight:700;color:var(--muted)" id="match-count">0 Treffer</span>
            <span style="font-size:0.82rem;font-weight:700;color:var(--muted)" id="match-groups">0 Gruppen</span>
        </div>
        <div style="margin-top:10px" id="match-chips"></div>
    </div>

    <div class="t-panel" id="groups-panel" style="display:none">
        <div class="t-panel-title"><i class="fas fa-layer-group"></i> Capture Groups</div>
        <div id="groups-list"></div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-exchange-alt"></i> Ersetzung</div>
        <div class="t-field">
            <label class="t-label">Ersetzen durch (Backreferences: $1, $2 …)</label>
            <input type="text" class="t-input" id="rx-replace" placeholder="z.B. [$1]" oninput="runReplace()" style="font-family:'JetBrains Mono',monospace">
        </div>
        <div class="t-field">
            <label class="t-label">Ergebnis</label>
            <div class="t-copy-wrap">
                <textarea class="t-textarea" id="rx-result" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
                <button class="t-copy-btn" onclick="copyResult()"><i class="fas fa-copy"></i></button>
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-book"></i> Preset-Bibliothek</div>
        <div style="display:flex;flex-wrap:wrap;gap:8px">
            <button class="preset-chip" onclick="loadPreset('email')">E-Mail</button>
            <button class="preset-chip" onclick="loadPreset('url')">URL</button>
            <button class="preset-chip" onclick="loadPreset('ipv4')">IPv4</button>
            <button class="preset-chip" onclick="loadPreset('phone')">Telefon (DE)</button>
            <button class="preset-chip" onclick="loadPreset('plz')">PLZ (DE)</button>
            <button class="preset-chip" onclick="loadPreset('date')">Datum</button>
            <button class="preset-chip" onclick="loadPreset('time')">Uhrzeit</button>
            <button class="preset-chip" onclick="loadPreset('hex')">Hex-Farbe</button>
            <button class="preset-chip" onclick="loadPreset('iban')">IBAN</button>
            <button class="preset-chip" onclick="loadPreset('number')">Zahl</button>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const PRESETS={
    email:{p:'[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}',f:'g',t:'Max schreibt an max@example.com und info@kotsch.tech oder support@google.de'},
    url:{p:'https?:\\/\\/[^\\s<>"{}|\\\\^`]+',f:'g',t:'Besuche https://kotsch.tech oder http://example.com für mehr Info.'},
    ipv4:{p:'\\b(?:\\d{1,3}\\.){3}\\d{1,3}\\b',f:'g',t:'Server läuft auf 192.168.1.1 und 10.0.0.1 oder 255.255.255.0'},
    phone:{p:'(?:\\+49|0)[\\s\\-]?(?:\\d[\\s\\-]?){9,14}',f:'g',t:'Ruf mich an unter 0176 12345678 oder +49 30 1234567'},
    plz:{p:'\\b[0-9]{5}\\b',f:'g',t:'Berlin 10115, München 80331, Hamburg 20095'},
    date:{p:'\\b(\\d{1,2})[\\.\\-\\/](\\d{1,2})[\\.\\-\\/](\\d{2,4})\\b',f:'g',t:'Geburtstag: 01.05.1990, Meeting: 15-12-2025, Launch: 3/7/24'},
    time:{p:'\\b([01]?\\d|2[0-3]):[0-5]\\d(?::[0-5]\\d)?\\b',f:'g',t:'Treffen um 09:30 Uhr, Mittag 12:00:00, Ende 17:45'},
    hex:{p:'#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})\\b',f:'g',t:'Farben: #fff, #10b981, #FF5733 und #abc'},
    iban:{p:'[A-Z]{2}\\d{2}[A-Z0-9]{1,30}',f:'g',t:'IBAN: DE89370400440532013000 oder AT611904300234573201'},
    number:{p:'-?\\d+(?:[,\\.]\\d+)?',f:'g',t:'Preise: 9,99 €, 1.234 Stück, -42 Grad, 3.14 Pi'},
};

function loadPreset(key){
    const p=PRESETS[key];
    document.getElementById('rx-pattern').value=p.p;
    document.getElementById('rx-flags').value=p.f;
    document.getElementById('rx-text').value=p.t;
    runRx();
}

const COLORS=['rx-0','rx-1','rx-2','rx-3','rx-4'];

function runRx(){
    const pattern=document.getElementById('rx-pattern').value;
    const flags=document.getElementById('rx-flags').value;
    const text=document.getElementById('rx-text').value;
    const errEl=document.getElementById('rx-err');
    errEl.style.display='none';
    document.getElementById('match-chips').innerHTML='';
    document.getElementById('groups-panel').style.display='none';
    document.getElementById('rx-highlighted').style.display='none';
    document.getElementById('match-count').textContent='0 Treffer';
    document.getElementById('match-groups').textContent='0 Gruppen';

    if(!pattern||!text)return;
    let rx;
    try{ rx=new RegExp(pattern,flags.replace(/[^gimsuy]/g,'')); }
    catch(e){ errEl.textContent='Regex-Fehler: '+e.message; errEl.style.display='block'; return; }

    const matches=[...text.matchAll(new RegExp(pattern,flags.includes('g')?flags:flags+'g'))];
    document.getElementById('match-count').textContent=matches.length+' Treffer';

    const numGroups=matches.length>0?(matches[0].length-1):0;
    document.getElementById('match-groups').textContent=numGroups+' Gruppen';

    // chips
    document.getElementById('match-chips').innerHTML=matches.map((m,i)=>
        `<span class="match-chip"><span class="match-idx">${i+1}</span>${escHTML(m[0])}</span>`
    ).join('');

    // highlight
    const hlEl=document.getElementById('rx-highlighted');
    let html='',last=0,colorIdx=0;
    matches.forEach(m=>{
        html+=escHTML(text.slice(last,m.index));
        html+=`<mark class="rx-highlight ${COLORS[colorIdx%COLORS.length]}">${escHTML(m[0])}</mark>`;
        last=m.index+m[0].length;
        colorIdx++;
    });
    html+=escHTML(text.slice(last));
    hlEl.innerHTML=html;
    hlEl.style.display=matches.length?'block':'none';

    // groups panel
    if(numGroups>0){
        document.getElementById('groups-panel').style.display='';
        const list=document.getElementById('groups-list');
        list.innerHTML=matches.map((m,mi)=>
            m.slice(1).map((g,gi)=>
                `<div class="group-row"><span class="group-lbl">M${mi+1} G${gi+1}</span><span class="group-val">${g!==undefined?escHTML(g):'<em style="color:var(--muted)">kein Match</em>'}</span></div>`
            ).join('')
        ).join('');
    }

    runReplace();
}

function runReplace(){
    const pattern=document.getElementById('rx-pattern').value;
    const flags=document.getElementById('rx-flags').value;
    const text=document.getElementById('rx-text').value;
    const repl=document.getElementById('rx-replace').value;
    if(!pattern||!text)return;
    try{
        const rx=new RegExp(pattern,flags.includes('g')?flags:flags+'g');
        document.getElementById('rx-result').value=text.replace(rx,repl);
    }catch(e){}
}

function copyResult(){
    const val=document.getElementById('rx-result').value;
    if(!val)return;
    navigator.clipboard.writeText(val).then(()=>{
        const btn=document.querySelector('.t-copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}

function escHTML(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
</script>

@include('tools._seo_content', ['toolSlug' => 'regex-tester', 'toolName' => 'Regex Tester'])

@endsection