web design

/* This is the CSS for the highlight effect */
.highlighted-term {
  background-color: #FFD700; /* A nice gold/yellow color */
  color: #000000;
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: bold;
}

// Wait for the entire page to load before running the script
window.addEventListener('load', function() {

  // Bricks Dynamic Data gets the current archive category/term name
  const termToHighlight = 'web design' ;

  // This is the CSS class you added to your posts container in Step 1
  const searchArea = document.querySelector('.posts-highlight-area');

  // If we don't find the term or the search area, stop the script
  if (!termToHighlight || !searchArea) {
    return;
  }

  // This is a regular expression to find the term. 
  // 'gi' means Global (find all matches) and Case-Insensitive.
  const regex = new RegExp(`(${termToHighlight})`, 'gi');

  // Get all descendants of the search area
  const allElements = searchArea.getElementsByTagName('*');

  // Loop through every element inside your posts container
  for (const element of allElements) {
    // Only look at the direct text content of an element
    if (element.children.length === 0 && element.textContent) {
        // Replace the found text with the same text wrapped in our styled span
        // We use a function here to preserve the original casing of the found text
        element.innerHTML = element.innerHTML.replace(regex, (match) => `<span class="highlighted-term">${match}</span>`);
    }
  }

});