ทองจุล ขันขาว

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ คำที่มักใช้ผิด

แสดงทั้งหมด

search_functionality_for_vocab

let searchIndex = 0; let lastSearchTerm = ""; let allMatches = []; function updateButtons() { const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); if (allMatches.length <= 1) { prevBtn.disabled = true; nextBtn.disabled = true; } else { prevBtn.disabled = searchIndex === 0; nextBtn.disabled = searchIndex === allMatches.length - 1; } } function searchAndHighlight() { const input = document.getElementById('searchInput').value.trim(); if (!input) return; if (input !== lastSearchTerm) { lastSearchTerm = input; searchIndex = 0; highlightAllMatches(input); } } function highlightAllMatches(term) { const content = document.getElementById('content'); removeHighlights(); const regex = new RegExp(term, 'gi'); allMatches = []; const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, null, false); let textNodes = []; while (walker.nextNode()) { textNodes.push(walker.currentNode); } textNodes.forEach(node => { let parent = node.parentNode; let text = node.nodeValue; if (regex.test(text)) { let frag = document.createDocumentFragment(); let lastIndex = 0; regex.lastIndex = 0; let match; while ((match = regex.exec(text)) !== null) { let before = text.slice(lastIndex, match.index); if (before) frag.appendChild(document.createTextNode(before)); let span = document.createElement('span'); span.className = 'highlight'; span.textContent = match[0]; frag.appendChild(span); allMatches.push(span); lastIndex = match.index + match[0].length; } let after = text.slice(lastIndex); if (after) frag.appendChild(document.createTextNode(after)); parent.replaceChild(frag, node); } }); if (allMatches.length > 0) { allMatches[0].classList.add('current'); allMatches[0].scrollIntoView({ behavior: 'smooth', block: 'center' }); } updateButtons(); } function removeHighlights() { allMatches.forEach(span => { const textNode = document.createTextNode(span.textContent); span.parentNode.replaceChild(textNode, span); }); allMatches = []; searchIndex = 0; updateButtons(); } function moveToPreviousMatch() { if (searchIndex > 0) { allMatches[searchIndex].classList.remove('current'); searchIndex--; allMatches[searchIndex].classList.add('current'); allMatches[searchIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); updateButtons(); } } function moveToNextMatch() { if (searchIndex < allMatches.length - 1) { allMatches[searchIndex].classList.remove('current'); searchIndex++; allMatches[searchIndex].classList.add('current'); allMatches[searchIndex].scrollIntoView({ behavior: 'smooth', block: 'center' }); updateButtons(); } } function clearSearch() { removeHighlights(); document.getElementById('searchInput').value = ""; lastSearchTerm = ""; } function showContent(id) { const allSections = document.querySelectorAll('#content > div'); allSections.forEach(section => { section.style.display = 'none'; }); const target = document.getElementById(id); if (target) { target.style.display = 'block'; target.scrollIntoView({ behavior: 'smooth' }); } // clear highlights and reset search input when link clicked clearSearch(); } /* ============================================= */ function highlightMatches() { let content = document.getElementById('content'); content.innerHTML = content.innerHTML.replace(/(.*?)<\/mark>/g, '$1'); if (matches.length === 0) return; let currentMatch = matches[searchIndex % matches.length]; let span = document.createElement('mark'); span.className = 'highlight'; span.textContent = currentMatch.node.nodeValue.substr(currentMatch.start, currentMatch.length); let before = document.createTextNode(currentMatch.node.nodeValue.substring(0, currentMatch.start)); let after = document.createTextNode(currentMatch.node.nodeValue.substring(currentMatch.start + currentMatch.length)); let parent = currentMatch.node.parentNode; parent.replaceChild(after, currentMatch.node); parent.insertBefore(span, after); parent.insertBefore(before, span); span.scrollIntoView({ behavior: 'smooth', block: 'center' }); searchIndex++; }