Vrije tekst zoeken

Here's an example of how you can search for a specific keyword on a webpage using JavaScript and highlight the results:

document.addEventListener('DOMContentLoaded', function () {
  const searchButton = document.getElementById('searchButton');
  searchButton.addEventListener('click', searchAndHighlight);
},false);
function searchAndHighlight(e) {
  e.preventDefault();
  const keyword = document.getElementById('searchInput').value.trim();

  // If the search input is empty, remove existing highlighting and return
  if (keyword === '') {
    removeHighlighting();
    return;
  }

  const regex = new RegExp(keyword, 'gi');

  // Get all text nodes within the document body
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

  const textNodesToHighlight = [];

  // Iterate through each text node and collect the ones that match the search keyword
  while (walker.nextNode()) {
    const currentNode = walker.currentNode;
    if (regex.test(currentNode.textContent)) {
      textNodesToHighlight.push(currentNode);
    }
  }

  removeHighlighting();

  // Apply highlighting to the matching text nodes
  textNodesToHighlight.forEach(function (node) {
    const span = document.createElement('span');
    span.classList.add('highlight');
    span.textContent = node.textContent;
    node.parentNode.replaceChild(span, node);
  });

  // Scroll to the first highlighted occurrence
  const firstHighlightedElement = document.querySelector('.highlight');
  if (firstHighlightedElement) {
    firstHighlightedElement.scrollIntoView({ behavior: 'smooth' });
  }
}

function removeHighlighting() {
  const highlightedElements = document.querySelectorAll('.highlight');
  highlightedElements.forEach(function (element) {
    element.outerHTML = element.textContent;
  });
}

In dit voorbeeld hebben we een webpagina met een alinea tekst en een invoerveld waar u een trefwoord kunt invoeren om naar te zoeken. Wanneer u op de knop "Zoeken" klikt, wordt de JavaScript-functie searchAndHighlight geactiveerd.

De functie haalt het trefwoord op uit het invoerveld, maakt een reguliere expressie met het trefwoord en haalt het inhoudselement op waar de zoekopdracht zal worden uitgevoerd. Vervolgens wordt alle eerdere markering verwijderd door een reguliere expressie te gebruiken en wordt deze vervangen door de originele tekst.

Ten slotte voert het de zoekopdracht uit met behulp van de reguliere expressie en voegt het de <span class="highlight">-tags toe rond de overeenkomende resultaten om het markeringseffect toe te passen.

Merk op dat dit voorbeeld een basisimplementatie biedt voor illustratieve doeleinden. In een real-world scenario wilt u misschien randgevallen afhandelen, hoofdlettergevoeligheid afhandelen of meer geavanceerde zoekfuncties bieden.