@extends('layouts.app')
@section('title','Regex-Automat - Thompson-NFA visualisieren | kotsch.tech')
@section('meta_description','Regex-Automat online: regulaere Ausdruecke als Thompson-NFA visualisieren und Teststrings lokal im Browser pruefen.')
@section('meta_extra')
<meta name="keywords" content="Regex Automat, NFA, Thompson Konstruktion, regulaerer Ausdruck, Automat Visualizer">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.kt-side-ad,.side-ad{display:none!important}.kt-banner-ad{display:block!important}.ae-wide{width:min(100% - 32px,1400px)!important}.ra-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px}.ra-wrap{position:relative}.ra-svg{width:100%;height:760px;border:1.5px solid var(--line);border-radius:16px;background:radial-gradient(circle at 1px 1px,#e2e8f0 1px,transparent 1px) 0 0/24px 24px,#fff;box-shadow:var(--shadow);touch-action:none}.ra-bar{display:flex;gap:8px;flex-wrap:wrap}.ra-out{font-family:'JetBrains Mono',monospace;white-space:pre-wrap;line-height:1.6}.state{fill:#fff;stroke:#0f172a;stroke-width:2}.state.start{stroke:#2563eb}.state.accept{stroke:#10b981;stroke-width:4}.edge{stroke:#475569;stroke-width:2;fill:none;marker-end:url(#arr)}.label{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:900;text-anchor:middle;fill:#0f172a}.active{fill:#dcfce7!important}.canvas-controls{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}.cc-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;box-shadow:0 2px 8px -2px rgba(15,23,42,.16)}@media(max-width:980px){.tool-container.ae-wide{width:min(100% - 16px,100%)!important}.ra-grid{grid-template-columns:1fr}.ra-svg{height:min(68vh,620px);min-height:380px}.ra-bar{flex-wrap:nowrap;overflow-x:auto}.ra-bar>*{flex:0 0 auto}.ra-bar .t-btn,.ra-bar input{min-height:44px}.canvas-controls{flex-direction:row;top:10px;right:10px;bottom:auto}.cc-btn{min-width:44px;min-height:44px}}
</style>
<div class="tool-page"><div class="tool-container ae-wide">
<div class="tool-header"><span class="t-tag"><i class="fas fa-code-branch"></i> Developer</span><h1 class="tool-h1">Regex<span>-Automat.</span></h1><p class="tool-sub">Regex eingeben, Thompson-NFA sehen, Teststring prüfen. Unterstützt Konkatenation, Klammern, |, *, + und ?.</p></div>
<div class="t-panel"><div class="ra-bar"><input class="t-input" id="regex" value="(a|b)*abb" oninput="build()" style="max-width:260px"><input class="t-input" id="word" value="aabb" oninput="test()" style="max-width:180px"><button class="t-btn accent sm" onclick="build()">Bauen</button><button class="t-btn ghost sm" onclick="demo()">Demo</button></div></div>
<div class="ra-grid"><div class="t-panel"><div class="ra-wrap"><svg id="svg" class="ra-svg" viewBox="0 0 900 560"><defs><marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#475569"/></marker></defs><g id="g"></g></svg><div class="canvas-controls"><button class="cc-btn" onclick="zoom(1.2)" title="Zoom +"><i class="fas fa-plus"></i></button><button class="cc-btn" onclick="zoom(1/1.2)" title="Zoom -"><i class="fas fa-minus"></i></button><button class="cc-btn" onclick="resetView()" title="Ansicht reset"><i class="fas fa-crosshairs"></i></button></div></div></div><div class="t-panel"><div class="t-panel-title"><i class="fas fa-vial"></i> Simulation</div><div id="out" class="ra-out"></div></div></div>
@include('tools._ads_banner')
</div></div>
<script>
let nfa=null,active=new Set(),view={x:0,y:0,k:1},drag=null;const eps='ε',svg=document.getElementById('svg'),VP=document.getElementById('g');
function applyView(){VP.setAttribute('transform',`translate(${view.x},${view.y}) scale(${view.k})`)}
function rawPt(e){const r=svg.getBoundingClientRect();return{x:(e.clientX-r.left)*900/r.width,y:(e.clientY-r.top)*560/r.height}}
function zoom(factor,anchor){const p=anchor||{x:450,y:280};const wx=(p.x-view.x)/view.k,wy=(p.y-view.y)/view.k;view.k=Math.max(.3,Math.min(3,view.k*factor));view.x=p.x-wx*view.k;view.y=p.y-wy*view.k;applyView()}
function resetView(){view={x:0,y:0,k:1};applyView()}
svg.addEventListener('wheel',e=>{e.preventDefault();zoom(e.deltaY<0?1.1:1/1.1,rawPt(e))},{passive:false});
svg.addEventListener('pointerdown',e=>{if(e.target!==svg)return;drag={sx:e.clientX,sy:e.clientY,ox:view.x,oy:view.y};svg.setPointerCapture(e.pointerId)});
svg.addEventListener('pointermove',e=>{if(!drag)return;const r=svg.getBoundingClientRect();view.x=drag.ox+(e.clientX-drag.sx)*900/r.width;view.y=drag.oy+(e.clientY-drag.sy)*560/r.height;applyView()});
svg.addEventListener('pointerup',()=>drag=null);
function addConcat(s){let out='';for(let i=0;i<s.length;i++){const a=s[i],b=s[i+1];out+=a;if(b&&/[a-zA-Z0-9)]|\*|\+|\?/.test(a)&&/[a-zA-Z0-9(]/.test(b))out+='.'}return out}
function post(re){const prec={'|':1,'.':2,'*':3,'+':3,'?':3},out=[],ops=[];for(const c of addConcat(re)){if(/[a-zA-Z0-9]/.test(c))out.push(c);else if(c==='(')ops.push(c);else if(c===')'){while(ops.at(-1)!=='(')out.push(ops.pop());ops.pop()}else{while(ops.length&&ops.at(-1)!=='('&&prec[ops.at(-1)]>=prec[c])out.push(ops.pop());ops.push(c)}}while(ops.length)out.push(ops.pop());return out}
function buildNfa(re){let id=0,edges=[],states=[];const st=()=>{const s={id:id++};states.push(s);return s};const edge=(a,b,l)=>edges.push({from:a.id,to:b.id,l});const stack=[];for(const t of post(re)){if(/[a-zA-Z0-9]/.test(t)){const a=st(),b=st();edge(a,b,t);stack.push({s:a,e:b})}else if(t==='.'){const b=stack.pop(),a=stack.pop();edge(a.e,b.s,eps);stack.push({s:a.s,e:b.e})}else if(t==='|'){const b=stack.pop(),a=stack.pop(),s=st(),e=st();edge(s,a.s,eps);edge(s,b.s,eps);edge(a.e,e,eps);edge(b.e,e,eps);stack.push({s,e})}else if(t==='*'){const a=stack.pop(),s=st(),e=st();edge(s,a.s,eps);edge(s,e,eps);edge(a.e,a.s,eps);edge(a.e,e,eps);stack.push({s,e})}else if(t==='+'){const a=stack.pop(),s=st(),e=st();edge(s,a.s,eps);edge(a.e,a.s,eps);edge(a.e,e,eps);stack.push({s,e})}else if(t==='?'){const a=stack.pop(),s=st(),e=st();edge(s,a.s,eps);edge(s,e,eps);edge(a.e,e,eps);stack.push({s,e})}}const r=stack.pop();if(!r)throw new Error('Leere Regex');return{states,edges,start:r.s.id,accept:r.e.id}}
function closure(set){let res=new Set(set),chg=true;while(chg){chg=false;nfa.edges.forEach(e=>{if(e.l===eps&&res.has(e.from)&&!res.has(e.to)){res.add(e.to);chg=true}})}return res}
function step(set,ch){const nxt=new Set();nfa.edges.forEach(e=>{if(e.l===ch&&set.has(e.from))nxt.add(e.to)});return closure(nxt)}
function build(){try{nfa=buildNfa(document.getElementById('regex').value.trim());active=closure(new Set([nfa.start]));draw();test()}catch(e){document.getElementById('out').textContent='Fehler: '+e.message}}
function test(){if(!nfa)return;let set=closure(new Set([nfa.start])),lines=[`Start: {${[...set].join(',')}}`];for(const ch of document.getElementById('word').value){set=step(set,ch);lines.push(`${ch} -> {${[...set].join(',')}}`)}active=set;draw();lines.push(set.has(nfa.accept)?'AKZEPTIERT':'ABGELEHNT');document.getElementById('out').textContent=lines.join('\n')}
function draw(){const g=VP;if(!nfa)return;const cols=Math.ceil(Math.sqrt(nfa.states.length)),pos={};nfa.states.forEach((s,i)=>pos[s.id]={x:80+(i%cols)*150,y:90+Math.floor(i/cols)*105});g.innerHTML=nfa.edges.map(e=>{const a=pos[e.from],b=pos[e.to],mx=(a.x+b.x)/2,my=(a.y+b.y)/2-8;return`<path class="edge" d="M${a.x},${a.y} Q${mx},${my-20} ${b.x},${b.y}"/><text class="label" x="${mx}" y="${my}">${e.l}</text>`}).join('')+nfa.states.map(s=>`<circle class="state ${s.id===nfa.start?'start':''} ${s.id===nfa.accept?'accept':''} ${active.has(s.id)?'active':''}" cx="${pos[s.id].x}" cy="${pos[s.id].y}" r="24"/><text class="label" x="${pos[s.id].x}" y="${pos[s.id].y+5}">q${s.id}</text>`).join('');applyView()}
function demo(){document.getElementById('regex').value='(a|b)*abb';document.getElementById('word').value='aabb';build()}build();
</script>

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

@endsection