Fritextsökning

Här är ett exempel på hur du kan söka efter ett specifikt sökord på en webbsida med JavaScript och markera resultaten:

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;
  });
}

I det här exemplet har vi en webbsida med ett textstycke och ett inmatningsfält där du kan ange ett nyckelord att söka efter. När du klickar på knappen "Sök" utlöses JavaScript-funktionen searchAndHighlight.

Funktionen hämtar nyckelordet från inmatningsfältet, skapar ett reguljärt uttryck med nyckelordet och hämtar innehållselementet där sökningen ska utföras. Den tar sedan bort eventuell tidigare markering genom att använda ett reguljärt uttryck och ersätter det med originaltexten.

Slutligen utför den sökningen med det reguljära uttrycket och lägger till <span class="highlight">-taggarna runt de matchande resultaten för att tillämpa framhävningseffekten.

Observera att detta exempel ger en grundläggande implementering i illustrativt syfte. I ett verkligt scenario kanske du vill hantera kantfall, hantera skiftlägeskänslighet eller tillhandahålla mer avancerade sökfunktioner.