{"id":74,"date":"2026-03-16T13:34:32","date_gmt":"2026-03-16T13:34:32","guid":{"rendered":"https:\/\/tools.sanepo.com\/?post_type=tool&#038;p=74"},"modified":"2026-03-16T13:34:33","modified_gmt":"2026-03-16T13:34:33","slug":"smart-find-replace-tool-online","status":"publish","type":"tool","link":"https:\/\/tools.sanepo.com\/hi\/features\/smart-find-replace-tool-online\/","title":{"rendered":"Smart Find &amp; Replace Tool Online \u2013 Free Text Manipulator"},"content":{"rendered":"\n<style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n    \/* CSS Variables Default (Strictly Light Mode Default) *\/\n    #wpnt-text-replacer {\n        --bg-surface: #ffffff;\n        --bg-subtle: #f8fafc;\n        --border-color: #e2e8f0;\n        --border-focus: #4361ee;\n        --accent-color: #4361ee;\n        --accent-hover: #3a56d4;\n        --text-main: #0f172a;\n        --text-muted: #64748b;\n        --highlight-bg: rgba(67, 97, 238, 0.15);\n        --highlight-text: #1e40af;\n        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        --radius-lg: 16px;\n        --radius-md: 10px;\n        --radius-sm: 6px;\n        --success: #10b981;\n        --danger: #ef4444;\n        \n        font-family: 'Inter', sans-serif;\n        color: var(--text-main);\n        width: 100%;\n        margin: 30px auto;\n        background: var(--bg-surface);\n        border: 1px solid var(--border-color);\n        border-radius: var(--radius-lg);\n        box-shadow: var(--shadow-md);\n        padding: 32px;\n        box-sizing: border-box;\n        line-height: 1.6;\n        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;\n    }\n\n    #wpnt-text-replacer * {\n        box-sizing: border-box;\n    }\n\n    \/* Smart Dark Mode Adaptability: \n       HANYA aktif jika website secara eksplisit memberikan class .dark atau data-theme=\"dark\".\n       Ini mencegah bentrok dengan preferensi OS pengguna.\n    *\/\n    :root.dark #wpnt-text-replacer,\n    html.dark #wpnt-text-replacer,\n    body.dark #wpnt-text-replacer,\n    [data-theme=\"dark\"] #wpnt-text-replacer,\n    [data-bs-theme=\"dark\"] #wpnt-text-replacer {\n        --bg-surface: #1e293b;\n        --bg-subtle: #0f172a;\n        --border-color: #334155;\n        --border-focus: #60a5fa;\n        --accent-color: #3b82f6;\n        --accent-hover: #2563eb;\n        --text-main: #f8fafc;\n        --text-muted: #94a3b8;\n        --highlight-bg: rgba(59, 130, 246, 0.3);\n        --highlight-text: #bfdbfe;\n        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);\n    }\n\n    \/* Typography & Header *\/\n    #wpnt-text-replacer .wpnt-header {\n        text-align: center;\n        margin-bottom: 28px;\n    }\n    #wpnt-text-replacer h3 {\n        margin: 0 0 8px 0;\n        font-size: 1.8rem;\n        font-weight: 700;\n        letter-spacing: -0.03em;\n        color: var(--text-main);\n    }\n    #wpnt-text-replacer p.wpnt-subtitle {\n        margin: 0;\n        font-size: 0.95rem;\n        color: var(--text-muted);\n    }\n\n    \/* Grid Layout *\/\n    #wpnt-text-replacer .wpnt-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 24px;\n    }\n    @media (max-width: 800px) {\n        #wpnt-text-replacer .wpnt-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    \/* Form Elements *\/\n    #wpnt-text-replacer .wpnt-group {\n        margin-bottom: 20px;\n    }\n    #wpnt-text-replacer label {\n        display: block;\n        font-size: 0.8rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--text-muted);\n        margin-bottom: 8px;\n    }\n    \n    #wpnt-text-replacer input[type=\"text\"],\n    #wpnt-text-replacer textarea,\n    #wpnt-text-replacer select {\n        width: 100%;\n        padding: 12px 16px;\n        background: var(--bg-surface);\n        border: 1px solid var(--border-color);\n        border-radius: var(--radius-md);\n        color: var(--text-main);\n        font-family: inherit;\n        font-size: 0.95rem;\n        transition: all 0.2s ease;\n        outline: none;\n        box-shadow: var(--shadow-sm);\n    }\n    #wpnt-text-replacer input[type=\"text\"]:focus,\n    #wpnt-text-replacer textarea:focus,\n    #wpnt-text-replacer select:focus {\n        border-color: var(--border-focus);\n        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);\n    }\n\n    #wpnt-text-replacer textarea {\n        min-height: 220px;\n        resize: vertical;\n        line-height: 1.5;\n        background: var(--bg-subtle);\n    }\n\n    #wpnt-text-replacer select {\n        cursor: pointer;\n        appearance: none;\n        background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: right 12px center;\n        padding-right: 40px;\n        background-color: var(--bg-surface);\n    }\n\n    \/* Find & Replace Row with Swap Button *\/\n    #wpnt-text-replacer .wpnt-fr-row {\n        display: flex;\n        align-items: flex-end;\n        gap: 12px;\n        margin-bottom: 20px;\n    }\n    #wpnt-text-replacer .wpnt-fr-col {\n        flex: 1;\n    }\n    #wpnt-text-replacer .wpnt-btn-swap {\n        background: var(--bg-subtle);\n        border: 1px solid var(--border-color);\n        color: var(--text-muted);\n        border-radius: var(--radius-md);\n        height: 46px;\n        width: 46px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s;\n        box-shadow: var(--shadow-sm);\n    }\n    #wpnt-text-replacer .wpnt-btn-swap:hover {\n        background: var(--bg-surface);\n        color: var(--accent-color);\n        border-color: var(--accent-color);\n        transform: rotate(180deg);\n    }\n\n    \/* Modern Pill Toggles *\/\n    #wpnt-text-replacer .wpnt-toggles {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        margin-bottom: 20px;\n    }\n    #wpnt-text-replacer .wpnt-toggle-label {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    #wpnt-text-replacer .wpnt-toggle-label input {\n        position: absolute;\n        opacity: 0;\n        cursor: pointer;\n        height: 0;\n        width: 0;\n    }\n    #wpnt-text-replacer .wpnt-toggle-pill {\n        padding: 6px 14px;\n        background: var(--bg-subtle);\n        border: 1px solid var(--border-color);\n        border-radius: 20px;\n        font-size: 0.85rem;\n        font-weight: 500;\n        color: var(--text-muted);\n        transition: all 0.2s;\n        user-select: none;\n    }\n    #wpnt-text-replacer .wpnt-toggle-label:hover .wpnt-toggle-pill {\n        background: var(--bg-surface);\n        border-color: var(--border-focus);\n        color: var(--text-main);\n    }\n    #wpnt-text-replacer .wpnt-toggle-label input:checked ~ .wpnt-toggle-pill {\n        background: var(--accent-color);\n        color: #fff;\n        border-color: var(--accent-color);\n    }\n\n    \/* Output Box (Preview) *\/\n    #wpnt-text-replacer .wpnt-output-box {\n        width: 100%;\n        min-height: 220px;\n        padding: 16px;\n        background: var(--bg-subtle);\n        border: 1px solid var(--border-color);\n        border-radius: var(--radius-md);\n        color: var(--text-main);\n        font-family: inherit;\n        font-size: 0.95rem;\n        overflow-y: auto;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n        box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);\n    }\n    #wpnt-text-replacer .wpnt-output-box:empty::before {\n        content: 'Result preview will appear here...';\n        color: var(--text-muted);\n        font-style: italic;\n    }\n    #wpnt-text-replacer mark {\n        background-color: var(--highlight-bg);\n        color: var(--highlight-text);\n        border-radius: 4px;\n        padding: 2px 4px;\n        font-weight: 600;\n        box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n    }\n\n    \/* Stats Panel *\/\n    #wpnt-text-replacer .wpnt-stats-panel {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-top: 16px;\n        padding: 12px 16px;\n        background: var(--bg-surface);\n        border: 1px solid var(--border-color);\n        border-radius: var(--radius-md);\n        font-size: 0.85rem;\n        box-shadow: var(--shadow-sm);\n    }\n    #wpnt-text-replacer .wpnt-stat-item {\n        color: var(--text-muted);\n    }\n    #wpnt-text-replacer .wpnt-stat-val {\n        font-weight: 700;\n        color: var(--text-main);\n        margin-left: 4px;\n    }\n    #wpnt-text-replacer .wpnt-badge {\n        background: rgba(16, 185, 129, 0.1);\n        color: var(--success);\n        padding: 4px 10px;\n        border-radius: 20px;\n        font-weight: 600;\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n    }\n\n    \/* Action Buttons *\/\n    #wpnt-text-replacer .wpnt-actions {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n        gap: 12px;\n        margin-top: 20px;\n    }\n    #wpnt-text-replacer .wpnt-btn {\n        background: var(--accent-color);\n        color: #ffffff;\n        border: none;\n        padding: 12px 16px;\n        border-radius: var(--radius-md);\n        cursor: pointer;\n        font-weight: 600;\n        font-size: 0.9rem;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        transition: all 0.2s;\n        box-shadow: var(--shadow-sm);\n    }\n    #wpnt-text-replacer .wpnt-btn:hover {\n        background: var(--accent-hover);\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);\n    }\n    #wpnt-text-replacer .wpnt-btn.secondary {\n        background: var(--bg-surface);\n        color: var(--text-main);\n        border: 1px solid var(--border-color);\n    }\n    #wpnt-text-replacer .wpnt-btn.secondary:hover {\n        background: var(--bg-subtle);\n        border-color: var(--border-focus);\n        color: var(--accent-color);\n    }\n    #wpnt-text-replacer .wpnt-btn.danger {\n        background: rgba(239, 68, 68, 0.1);\n        color: var(--danger);\n        border: 1px solid rgba(239, 68, 68, 0.2);\n    }\n    #wpnt-text-replacer .wpnt-btn.danger:hover {\n        background: var(--danger);\n        color: #fff;\n    }\n\n    \/* Toast Notification *\/\n    #wpnt-text-replacer .wpnt-toast {\n        position: absolute;\n        bottom: 24px;\n        left: 50%;\n        transform: translateX(-50%) translateY(20px);\n        background: var(--text-main);\n        color: var(--bg-surface);\n        padding: 10px 20px;\n        border-radius: 30px;\n        font-size: 0.9rem;\n        font-weight: 500;\n        opacity: 0;\n        pointer-events: none;\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        z-index: 50;\n        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    #wpnt-text-replacer .wpnt-toast.show {\n        transform: translateX(-50%) translateY(0);\n        opacity: 1;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 600px) {\n        #wpnt-text-replacer { padding: 20px 16px; margin: 15px auto; }\n        #wpnt-text-replacer .wpnt-fr-row { flex-direction: column; align-items: stretch; gap: 16px; }\n        #wpnt-text-replacer .wpnt-btn-swap { align-self: center; transform: rotate(90deg); }\n        #wpnt-text-replacer .wpnt-btn-swap:hover { transform: rotate(270deg); }\n        #wpnt-text-replacer .wpnt-stats-panel { flex-direction: column; gap: 10px; align-items: flex-start; }\n    }\n<\/style>\n\n<div id=\"wpnt-text-replacer\">\n    <div class=\"wpnt-header\">\n        <h3>Smart Text Manipulator Pro<\/h3>\n        <p class=\"wpnt-subtitle\">Client-side processing \u2022 Zero Server Load \u2022 Secure<\/p>\n    <\/div>\n\n    <div class=\"wpnt-grid\">\n        <!-- Kolom Kiri: Input & Pengaturan -->\n        <div>\n            <div class=\"wpnt-group\">\n                <label>\u2728 Magic Presets<\/label>\n                <select id=\"wpnt-preset\">\n                    <option value=\"\">&#8212; Choose a quick macro action &#8212;<\/option>\n                    <option value=\"double_spaces\">Remove Double Spaces<\/option>\n                    <option value=\"empty_lines\">Remove Empty Lines<\/option>\n                    <option value=\"extract_urls\">Extract All URLs \/ Links<\/option>\n                    <option value=\"extract_emails\">Extract All Emails<\/option>\n                    <option value=\"remove_html\">Strip HTML Tags<\/option>\n                    <option value=\"remove_numbers\">Remove All Numbers<\/option>\n                    <option value=\"remove_special\">Remove Special Characters<\/option>\n                <\/select>\n            <\/div>\n\n            <div class=\"wpnt-fr-row\">\n                <div class=\"wpnt-fr-col\">\n                    <label>Find Text<\/label>\n                    <input type=\"text\" id=\"wpnt-find\" placeholder=\"Text to find...\" autocomplete=\"off\">\n                <\/div>\n                <button class=\"wpnt-btn-swap\" id=\"wpnt-btn-swap\" title=\"Swap Find &#038; Replace\">\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 3 4 4-4 4\"\/><path d=\"M20 7H4\"\/><path d=\"m8 21-4-4 4-4\"\/><path d=\"M4 17h16\"\/><\/svg>\n                <\/button>\n                <div class=\"wpnt-fr-col\">\n                    <label>Replace With<\/label>\n                    <input type=\"text\" id=\"wpnt-replace\" placeholder=\"Replacement...\" autocomplete=\"off\">\n                <\/div>\n            <\/div>\n\n            <div class=\"wpnt-toggles\">\n                <label class=\"wpnt-toggle-label\" title=\"Match exact casing (Aa)\">\n                    <input type=\"checkbox\" id=\"wpnt-case\">\n                    <span class=\"wpnt-toggle-pill\">Aa Match Case<\/span>\n                <\/label>\n                <label class=\"wpnt-toggle-label\" title=\"Match exact whole words only\">\n                    <input type=\"checkbox\" id=\"wpnt-word\">\n                    <span class=\"wpnt-toggle-pill\">&#8220;&#8221; Whole Word<\/span>\n                <\/label>\n                <label class=\"wpnt-toggle-label\" title=\"Use Regular Expressions\">\n                    <input type=\"checkbox\" id=\"wpnt-regex\">\n                    <span class=\"wpnt-toggle-pill\">.* Use Regex<\/span>\n                <\/label>\n            <\/div>\n\n            <div class=\"wpnt-group\" style=\"margin-bottom:0;\">\n                <label>Source Text<\/label>\n                <textarea id=\"wpnt-source\" placeholder=\"Paste your text or manuscript here...\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <!-- Kolom Kanan: Preview & Actions -->\n        <div>\n            <div class=\"wpnt-group\">\n                <label>Result Preview<\/label>\n                <!-- Area Preview dengan Highlight -->\n                <div id=\"wpnt-preview\" class=\"wpnt-output-box\"><\/div>\n            <\/div>\n\n            <div class=\"wpnt-stats-panel\">\n                <div>\n                    <span class=\"wpnt-stat-item\">Replaced: <span class=\"wpnt-stat-val\" id=\"wpnt-count\" style=\"color: var(--accent-color);\">0<\/span><\/span>\n                    <span class=\"wpnt-stat-item\" style=\"margin-left: 12px;\">Words: <span class=\"wpnt-stat-val\" id=\"wpnt-words\">0<\/span><\/span>\n                    <span class=\"wpnt-stat-item\" style=\"margin-left: 12px;\">Chars: <span class=\"wpnt-stat-val\" id=\"wpnt-chars\">0<\/span><\/span>\n                <\/div>\n                <span class=\"wpnt-badge\" id=\"wpnt-status\">Ready<\/span>\n            <\/div>\n\n            <div class=\"wpnt-actions\">\n                <button class=\"wpnt-btn\" id=\"wpnt-btn-copy\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\n                    Copy Result\n                <\/button>\n                <button class=\"wpnt-btn secondary\" id=\"wpnt-btn-apply\" title=\"Move result back to Source Text for further editing\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 10h10a8 8 0 0 1 8 8v2M3 10l6 6M3 10l6-6\"\/><\/svg>\n                    Apply to Source\n                <\/button>\n                <button class=\"wpnt-btn secondary\" id=\"wpnt-btn-download\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\n                    Download\n                <\/button>\n                <button class=\"wpnt-btn danger\" id=\"wpnt-btn-clear\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"><\/polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"><\/path><\/svg>\n                    Clear All\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <div id=\"wpnt-toast\" class=\"wpnt-toast\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\n        <span id=\"wpnt-toast-msg\">Success!<\/span>\n    <\/div>\n<\/div>\n\n<script>\n    (() => {\n        \/\/ --- Elemen DOM ---\n        const ui = {\n            source: document.getElementById('wpnt-source'),\n            find: document.getElementById('wpnt-find'),\n            replace: document.getElementById('wpnt-replace'),\n            preview: document.getElementById('wpnt-preview'),\n            preset: document.getElementById('wpnt-preset'),\n            optCase: document.getElementById('wpnt-case'),\n            optWord: document.getElementById('wpnt-word'),\n            optRegex: document.getElementById('wpnt-regex'),\n            count: document.getElementById('wpnt-count'),\n            words: document.getElementById('wpnt-words'),\n            chars: document.getElementById('wpnt-chars'),\n            status: document.getElementById('wpnt-status'),\n            toast: document.getElementById('wpnt-toast'),\n            toastMsg: document.getElementById('wpnt-toast-msg')\n        };\n\n        const btns = {\n            swap: document.getElementById('wpnt-btn-swap'),\n            copy: document.getElementById('wpnt-btn-copy'),\n            apply: document.getElementById('wpnt-btn-apply'),\n            download: document.getElementById('wpnt-btn-download'),\n            clear: document.getElementById('wpnt-btn-clear')\n        };\n\n        \/\/ --- Fungsi Notifikasi (Toast) ---\n        let toastTimeout;\n        const showToast = (message) => {\n            ui.toastMsg.textContent = message;\n            ui.toast.classList.add('show');\n            clearTimeout(toastTimeout);\n            toastTimeout = setTimeout(() => ui.toast.classList.remove('show'), 2500);\n        };\n\n        \/\/ --- Keamanan XSS (Escape HTML) ---\n        const escapeHTML = (str) => {\n            return str.replace(\/[&<>'\"]\/g, tag => ({\n                '&': '&amp;', '<': '&lt;', '>': '&gt;', \"'\": '&#39;', '\"': '&quot;'\n            }[tag]));\n        };\n\n        \/\/ --- Menghitung Statistik Teks ---\n        const updateStats = (text) => {\n            ui.chars.textContent = text.length;\n            ui.words.textContent = text.trim() === '' ? 0 : text.trim().split(\/\\s+\/).length;\n        };\n\n        \/\/ --- Mesin Utama: Find & Replace ---\n        const processText = () => {\n            let text = ui.source.value;\n            let findStr = ui.find.value;\n            let replaceStr = ui.replace.value;\n\n            \/\/ Update stats karakter & kata\n            updateStats(text);\n\n            if (!text) {\n                ui.preview.innerHTML = '';\n                ui.count.textContent = '0';\n                ui.status.textContent = 'Ready';\n                ui.status.style.color = 'var(--success)';\n                ui.status.style.background = 'rgba(16, 185, 129, 0.1)';\n                return;\n            }\n\n            if (!findStr) {\n                ui.preview.textContent = text;\n                ui.count.textContent = '0';\n                return;\n            }\n\n            try {\n                let flags = 'g';\n                if (!ui.optCase.checked) flags += 'i';\n\n                let searchPattern = findStr;\n\n                if (!ui.optRegex.checked) {\n                    searchPattern = searchPattern.replace(\/[.*+?^${}()|[\\]\\\\]\/g, '\\\\$&');\n                }\n\n                if (ui.optWord.checked) {\n                    searchPattern = `\\\\b${searchPattern}\\\\b`;\n                }\n\n                const regex = new RegExp(searchPattern, flags);\n\n                const matches = text.match(regex);\n                const count = matches ? matches.length : 0;\n                ui.count.textContent = count;\n\n                \/\/ Render ke Preview dengan tag <mark>\n                let previewHTML = escapeHTML(text).replace(regex, () => {\n                    return `<mark>${escapeHTML(replaceStr || '')}<\/mark>`;\n                });\n\n                ui.preview.innerHTML = previewHTML;\n                \n                ui.status.textContent = 'Processed';\n                ui.status.style.color = 'var(--accent-color)';\n                ui.status.style.background = 'var(--highlight-bg)';\n\n            } catch (e) {\n                \/\/ Jika regex gagal \/ tidak valid\n                ui.preview.textContent = text;\n                ui.count.textContent = '0';\n                ui.status.textContent = 'Regex Error';\n                ui.status.style.color = 'var(--danger)';\n                ui.status.style.background = 'rgba(239, 68, 68, 0.1)';\n            }\n        };\n\n        \/\/ --- Event Listener Real-Time ---\n        const triggers = [ui.source, ui.find, ui.replace, ui.optCase, ui.optWord, ui.optRegex];\n        triggers.forEach(el => {\n            el.addEventListener(el.type === 'checkbox' ? 'change' : 'input', processText);\n        });\n\n        \/\/ --- Fitur Swap (Tukar Find\/Replace) ---\n        btns.swap.addEventListener('click', () => {\n            const temp = ui.find.value;\n            ui.find.value = ui.replace.value;\n            ui.replace.value = temp;\n            processText();\n        });\n\n        \/\/ --- Magic Presets Engine ---\n        ui.preset.addEventListener('change', (e) => {\n            const val = e.target.value;\n            if (!val) return;\n\n            ui.optRegex.checked = true; \n            ui.optWord.checked = false;\n            \n            switch (val) {\n                case 'double_spaces':\n                    ui.find.value = ' {2,}';\n                    ui.replace.value = ' ';\n                    break;\n                case 'empty_lines':\n                    ui.find.value = '^(?:[\\\\t ]*(?:\\\\r?\\\\n|\\\\r))+';\n                    ui.replace.value = '';\n                    break;\n                case 'extract_urls':\n                    ui.find.value = '(https?:\\\\\/\\\\\/[^\\\\s]+)';\n                    ui.replace.value = '$1\\\\n';\n                    break;\n                case 'extract_emails':\n                    ui.find.value = '([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\\\\.[a-zA-Z0-9_-]+)';\n                    ui.replace.value = '$1\\\\n';\n                    break;\n                case 'remove_html':\n                    ui.find.value = '<[^>]*>';\n                    ui.replace.value = '';\n                    break;\n                case 'remove_numbers':\n                    ui.find.value = '\\\\d+';\n                    ui.replace.value = '';\n                    break;\n                case 'remove_special':\n                    ui.find.value = '[^a-zA-Z0-9\\\\s]';\n                    ui.replace.value = '';\n                    break;\n            }\n            processText();\n        });\n\n        \/\/ --- Aksi Tombol ---\n        btns.copy.addEventListener('click', () => {\n            const result = ui.preview.innerText;\n            if (!result || !ui.source.value) return showToast('Nothing to copy!');\n            \n            navigator.clipboard.writeText(result).then(() => {\n                showToast('Result copied to clipboard!');\n            }).catch(() => {\n                const ta = document.createElement(\"textarea\");\n                ta.value = result;\n                document.body.appendChild(ta);\n                ta.select();\n                document.execCommand(\"copy\");\n                document.body.removeChild(ta);\n                showToast('Result copied!');\n            });\n        });\n\n        \/\/ Fitur Apply to Source: memindahkan hasil ke kotak awal untuk diolah lagi\n        btns.apply.addEventListener('click', () => {\n            if (!ui.source.value) return;\n            ui.source.value = ui.preview.innerText;\n            showToast('Applied to source! Ready for next step.');\n            processText(); \n        });\n\n        btns.download.addEventListener('click', () => {\n            const result = ui.preview.innerText;\n            if (!result || !ui.source.value) return showToast('Nothing to download!');\n\n            const blob = new Blob([result], { type: 'text\/plain' });\n            const url = window.URL.createObjectURL(blob);\n            const a = document.createElement('a');\n            a.href = url;\n            a.download = 'Sanepo-Tools-Result.txt';\n            a.click();\n            window.URL.revokeObjectURL(url);\n            showToast('File downloaded!');\n        });\n\n        btns.clear.addEventListener('click', () => {\n            ui.source.value = '';\n            ui.find.value = '';\n            ui.replace.value = '';\n            ui.preset.value = '';\n            ui.optCase.checked = false;\n            ui.optWord.checked = false;\n            ui.optRegex.checked = false;\n            processText();\n            showToast('All fields cleared!');\n        });\n\n    })();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Smart Text Manipulator Pro Client-side processing \u2022 Zero Server Load \u2022 Secure \u2728 Magic Presets &#8212; Choose a quick macro action &#8212;Remove Double SpacesRemove Empty LinesExtract All URLs \/ LinksExtract All EmailsStrip HTML TagsRemove All NumbersRemove Special Characters Find Text Replace With Aa Match Case &#8220;&#8221; Whole Word .* Use Regex Source Text Result Preview [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":[],"class_list":["post-74","tool","type-tool","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tools.sanepo.com\/hi\/wp-json\/wp\/v2\/tool\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.sanepo.com\/hi\/wp-json\/wp\/v2\/tool"}],"about":[{"href":"https:\/\/tools.sanepo.com\/hi\/wp-json\/wp\/v2\/types\/tool"}],"wp:attachment":[{"href":"https:\/\/tools.sanepo.com\/hi\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}