/* Custom scrollbar */ textarea::-webkit-scrollbar { width: 6px; } textarea::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; } #output::-webkit-scrollbar { width: 6px; } #output::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } #output::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } textarea { font-family: ‘Menlo’, ‘Monaco’, ‘Consolas’, monospace; font-size: 13px; resize: none; } #output { font-family: ‘Menlo’, ‘Monaco’, ‘Consolas’, monospace; font-size: 13px; } .na-line { color: #ef4444; } .match-line { color: #1e293b; } .badge-privacy { background: linear-gradient(135deg, #10b981, #059669); } /* Pulse on result update */ @keyframes fadeIn { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .result-anim { animation: fadeIn 0.2s ease-out; } /* Glow on copy success */ @keyframes glowPop { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); } 50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: none; } } .copy-success { animation: glowPop 0.5s ease-out; }

🔒 Zero-server · 100% In-Browser · No data ever leaves your device

// ── State ──────────────────────────────────────────────────────────────── let lookupMap = new Map(); let resultLines = []; // ── Helpers ────────────────────────────────────────────────────────────── /** * Parse textarea value into an array of non-empty trimmed lines. * Handles \r\n, \r, \n line endings. */ function parseLines(raw) { return raw .split(/\r\n|\r|\n/) .map(l => l.trim()) .filter(l => l.length > 0); } /** * Build a Map from the table textarea. * Each row is “Key\tValue”; if Tab is missing, the whole row is treated as * the Key and value is empty string. */ function buildMap(raw) { const map = new Map(); const lines = parseLines(raw); for (const line of lines) { const tabIdx = line.indexOf(‘\t’); if (tabIdx !== -1) { const key = line.substring(0, tabIdx).trim(); const val = line.substring(tabIdx + 1).trim(); if (key) map.set(key, val); } else { // Single-column row: key only, no value const key = line.trim(); if (key && !map.has(key)) map.set(key, ”); } } return map; } /** * Update the lookup counter badge. */ function updateCount(textareaId, countId) { const raw = document.getElementById(textareaId).value; const n = parseLines(raw).length; document.getElementById(countId).textContent = n + ‘ 筆’; return n; } // ── Core: VLOOKUP ──────────────────────────────────────────────────────── function runVlookup() { const rawA = document.getElementById(‘colA’).value; const rawB = document.getElementById(‘colB’).value; // Rebuild the map every time B changes (O(n) once) lookupMap = buildMap(rawB); // Update counters const nA = updateCount(‘colA’, ‘countA’); const nB = updateCount(‘colB’, ‘countB’); document.getElementById(‘statTable’).textContent = lookupMap.size; const lookupValues = parseLines(rawA); resultLines = []; let matchCount = 0; let naCount = 0; for (const val of lookupValues) { if (lookupMap.has(val)) { resultLines.push({ text: lookupMap.get(val), na: false }); matchCount++; } else { resultLines.push({ text: ‘#N/A’, na: true }); naCount++; } } // Render output renderOutput(lookupValues.length === 0); // Update stats bar const statsBar = document.getElementById(‘statsBar’); if (lookupValues.length > 0 || lookupMap.size > 0) { statsBar.classList.remove(‘hidden’); statsBar.classList.add(‘flex’); } else { statsBar.classList.add(‘hidden’); statsBar.classList.remove(‘flex’); } document.getElementById(‘statTotal’).textContent = lookupValues.length; document.getElementById(‘statMatch’).textContent = matchCount; document.getElementById(‘statNA’).textContent = naCount; } function renderOutput(isEmpty) { const output = document.getElementById(‘output’); if (isEmpty) { output.innerHTML = ‘在上方貼入資料後，結果將即時顯示於此…‘; return; } const fragment = document.createDocumentFragment(); for (const line of resultLines) { const div = document.createElement(‘div’); div.className = line.na ? ‘na-line’ : ‘match-line’; div.textContent = line.text; fragment.appendChild(div); } output.innerHTML = ”; output.appendChild(fragment); output.classList.remove(‘result-anim’); // Force reflow to restart animation void output.offsetWidth; output.classList.add(‘result-anim’); } // ── Copy ───────────────────────────────────────────────────────────────── async function copyResult() { if (resultLines.length === 0) return; const text = resultLines.map(l => l.text).join(‘\n’); try { await navigator.clipboard.writeText(text); } catch { // Fallback for environments without clipboard API const ta = document.createElement(‘textarea’); ta.value = text; ta.style.cssText = ‘position:fixed;opacity:0;top:0;left:0’; document.body.appendChild(ta); ta.select(); document.execCommand(‘copy’); document.body.removeChild(ta); } const btn = document.getElementById(‘copyBtn’); const originalHTML = btn.innerHTML; btn.innerHTML = ‘✅ 已複製！’; btn.classList.add(‘copy-success’, ‘bg-emerald-600’); btn.classList.remove(‘bg-emerald-500’); setTimeout(() => { btn.innerHTML = originalHTML; btn.classList.remove(‘copy-success’, ‘bg-emerald-600’); btn.classList.add(‘bg-emerald-500’); }, 1800); } // ── Clear helpers ──────────────────────────────────────────────────────── function clearField(textareaId, countId) { document.getElementById(textareaId).value = ”; document.getElementById(countId).textContent = ‘0 筆’; runVlookup(); } function clearAll() { [‘colA’, ‘colB’].forEach(id => document.getElementById(id).value = ”); [‘countA’, ‘countB’].forEach(id => document.getElementById(id).textContent = ‘0 筆’); lookupMap.clear(); resultLines = []; document.getElementById(‘output’).innerHTML = ‘在上方貼入資料後，結果將即時顯示於此…‘; document.getElementById(‘statsBar’).classList.add(‘hidden’); document.getElementById(‘statsBar’).classList.remove(‘flex’); } // ── Event listeners (real-time: “打字即顯示”) ────────────────────────── document.getElementById(‘colA’).addEventListener(‘input’, runVlookup); document.getElementById(‘colB’).addEventListener(‘input’, runVlookup); // Also handle paste events explicitly for instant response document.getElementById(‘colA’).addEventListener(‘paste’, () => setTimeout(runVlookup, 0)); document.getElementById(‘colB’).addEventListener(‘paste’, () => setTimeout(runVlookup, 0));