@extends('layouts.app')
@section('title', 'Text Bereiniger – Text aufräumen & formatieren | kotsch.tech')
@section('meta_description', 'Text bereinigen: Leerzeichen normalisieren, HTML-Tags entfernen, Sonderzeichen filtern, Großschreibung ändern, Zeilenumbrüche vereinheitlichen. Kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Text bereinigen, Leerzeichen entfernen, Text aufräumen, Text formatieren, Whitespace entfernen, Text normalisieren">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.op-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.op-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; transition:border-color 0.15s; }
.op-card:hover { border-color:var(--accent); }
.op-card label { font-size:0.82rem; font-weight:600; cursor:pointer; flex:1; }
.op-card .op-desc { font-size:0.72rem; color:var(--muted); display:block; font-weight:400; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-broom"></i> Text</span>
        <h1 class="tool-h1">Text<span>bereiniger.</span></h1>
        <p class="tool-sub">Leerzeichen, Tags, Sonderzeichen – alle Operationen kombinierbar, live vorschaubar.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:16px">
            <div class="t-field">
                <label class="t-label">Eingabe</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="tb-inp" placeholder="Text eingeben oder einfügen…" style="min-height:200px" oninput="process()"></textarea>
                    <button class="t-copy-btn" onclick="navigator.clipboard.readText().then(t=>{document.getElementById('tb-inp').value=t;process()})"><i class="fas fa-paste"></i></button>
                </div>
                <div id="tb-in-stats" style="font-size:0.75rem;color:var(--muted);margin-top:4px"></div>
            </div>
            <div class="t-field">
                <label class="t-label">Ergebnis</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="tb-out" readonly style="min-height:200px"></textarea>
                    <button class="t-copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('tb-out').value)"><i class="fas fa-copy"></i></button>
                </div>
                <div id="tb-out-stats" style="font-size:0.75rem;color:var(--muted);margin-top:4px"></div>
            </div>
        </div>

        <div style="margin-top:14px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px">Operationen</div>
            <div class="op-grid">
                <div class="op-card" onclick="toggle('op-ws')">
                    <div><label for="op-ws">Leerzeichen normalisieren<span class="op-desc">Mehrfach-Spaces → 1 Space</span></label></div>
                    <input type="checkbox" id="op-ws" class="t-check" checked onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-lines')">
                    <div><label for="op-lines">Leerzeilen reduzieren<span class="op-desc">3+ Zeilen → max. 2</span></label></div>
                    <input type="checkbox" id="op-lines" class="t-check" checked onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-trim')">
                    <div><label for="op-trim">Zeilenenden trimmen<span class="op-desc">Trailing Spaces pro Zeile</span></label></div>
                    <input type="checkbox" id="op-trim" class="t-check" checked onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-html')">
                    <div><label for="op-html">HTML-Tags entfernen<span class="op-desc">&lt;b&gt;fett&lt;/b&gt; → fett</span></label></div>
                    <input type="checkbox" id="op-html" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-urls')">
                    <div><label for="op-urls">URLs entfernen<span class="op-desc">http://... vollständig löschen</span></label></div>
                    <input type="checkbox" id="op-urls" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-emails')">
                    <div><label for="op-emails">E-Mails entfernen<span class="op-desc">user@example.com löschen</span></label></div>
                    <input type="checkbox" id="op-emails" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-nums')">
                    <div><label for="op-nums">Zahlen entfernen<span class="op-desc">Alle Ziffern löschen</span></label></div>
                    <input type="checkbox" id="op-nums" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-punct')">
                    <div><label for="op-punct">Satzzeichen entfernen<span class="op-desc">.,!?;: usw. löschen</span></label></div>
                    <input type="checkbox" id="op-punct" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-emoji')">
                    <div><label for="op-emoji">Emojis entfernen<span class="op-desc">Unicode Emoji-Zeichen</span></label></div>
                    <input type="checkbox" id="op-emoji" class="t-check" onchange="process()" onclick="event.stopPropagation()">
                </div>
                <div class="op-card" onclick="toggle('op-win')">
                    <div><label for="op-win">Windows-Zeilenenden<span class="op-desc">\r\n → \n vereinheitlichen</span></label></div>
                    <input type="checkbox" id="op-win" class="t-check" checked onchange="process()" onclick="event.stopPropagation()">
                </div>
            </div>
        </div>

        <div style="margin-top:14px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px">Groß-/Kleinschreibung</div>
            <div style="display:flex;gap:6px;flex-wrap:wrap">
                <button class="t-btn ghost sm" onclick="applyCase('none')">Original</button>
                <button class="t-btn ghost sm" onclick="applyCase('lower')">kleinbuchstaben</button>
                <button class="t-btn ghost sm" onclick="applyCase('upper')">GROSSBUCHSTABEN</button>
                <button class="t-btn ghost sm" onclick="applyCase('title')">Jeden Anfang Groß</button>
                <button class="t-btn ghost sm" onclick="applyCase('sentence')">Satzanfang groß</button>
            </div>
        </div>

        <div style="margin-top:14px;display:flex;gap:8px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="loadExample()"><i class="fas fa-file-alt"></i> Beispiel</button>
            <button class="t-btn ghost sm" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
            <button class="t-btn ghost sm" onclick="swapFields()"><i class="fas fa-exchange-alt"></i> Tauschen</button>
            <button class="t-btn ghost sm" onclick="downloadOut()"><i class="fas fa-download"></i> Herunterladen</button>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let caseMode = 'none';

function toggle(id) {
    const el = document.getElementById(id);
    el.checked = !el.checked;
    process();
}

function get(id) { return document.getElementById(id).checked; }

function process() {
    let t = document.getElementById('tb-inp').value;

    if (get('op-win')) t = t.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
    if (get('op-html')) t = t.replace(/<[^>]*>/g, '');
    if (get('op-urls')) t = t.replace(/https?:\/\/[^\s]+/g, '');
    if (get('op-emails')) t = t.replace(/[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}/g, '');
    if (get('op-nums')) t = t.replace(/\d/g, '');
    if (get('op-punct')) t = t.replace(/[.,!?;:'"()\[\]{}\-–—\/\\]/g, '');
    if (get('op-emoji')) t = t.replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}]/gu, '');
    if (get('op-ws')) t = t.replace(/[ \t]+/g, ' ');
    if (get('op-trim')) t = t.split('\n').map(l => l.trimEnd()).join('\n');
    if (get('op-lines')) t = t.replace(/\n{3,}/g, '\n\n');

    if (caseMode === 'lower') t = t.toLowerCase();
    else if (caseMode === 'upper') t = t.toUpperCase();
    else if (caseMode === 'title') t = t.replace(/\b\w/g, c => c.toUpperCase());
    else if (caseMode === 'sentence') t = t.replace(/(^|[.!?]\s+)([a-zäöü])/g, (m,p,c) => p+c.toUpperCase());

    t = t.trim();
    document.getElementById('tb-out').value = t;

    const inp = document.getElementById('tb-inp').value;
    document.getElementById('tb-in-stats').textContent = `${inp.length} Zeichen · ${inp.split('\n').length} Zeilen`;
    document.getElementById('tb-out-stats').textContent = `${t.length} Zeichen · ${t.split('\n').length} Zeilen · Δ${inp.length - t.length} entfernt`;
}

function applyCase(mode) { caseMode = mode; process(); }

function swapFields() {
    const inp = document.getElementById('tb-inp');
    inp.value = document.getElementById('tb-out').value;
    process();
}

function downloadOut() {
    const val = document.getElementById('tb-out').value;
    if (!val) return;
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([val],{type:'text/plain;charset=utf-8'}));
    a.download = 'bereinigt.txt'; a.click(); URL.revokeObjectURL(a.href);
}

function clearAll() {
    document.getElementById('tb-inp').value = '';
    document.getElementById('tb-out').value = '';
    document.getElementById('tb-in-stats').textContent = '';
    document.getElementById('tb-out-stats').textContent = '';
}

function loadExample() {
    document.getElementById('tb-inp').value = 'Hallo    Welt!   Dies   ist   ein   Test.\n\n\n\nBesuche https://example.com für mehr Infos.\nKontakt: info@example.com\n\n\nDieser Text hat   extra   Leerzeichen   und   <b>HTML-Tags</b>.\r\nWindows Zeilenenden   auch.   👍 Emojis 🎉 ebenfalls!';
    process();
}

loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'text-bereiniger', 'toolName' => 'Text Bereiniger'])

@endsection