highlighter results

[kerry_avxz]

Hi there, hope you are well

I have tried docs and forum to try and figure this out, but thought i’d reach out to see if i am missing something obvious… again 🙂

I have a search that works fine and highlights search phrase here https://archivesdundee.wpenginepowered.com/?s=wasp&asp_active=1&p_asid=1&p_asp_data=1&termset%5Battachment_category%5D%5B%5D=21&termset%5Battachment_category%5D%5B%5D=22&termset%5Battachment_category%5D%5B%5D=19&termset%5Battachment_category%5D%5B%5D=20&termset%5Battachment_category%5D%5B%5D=24&termset%5Battachment_category%5D%5B%5D=18&termset%5Battachment_category%5D%5B%5D=23&filters_initial=1&filters_changed=0&qtranslate_lang=0&asp_highlight=1&current_page_id=83

However, i have devised a new search results option for users that styles content differently.
This is a live search and not going to default results template.

For some reason the search phrase in url is different and wont highlight anything other than the number 1 in content. see here:
https://archivesdundee.wpenginepowered.com/search-content-view/?asp_ls=wasp&asp_active=1&p_asid=4&p_asp_data=1&termset%5Battachment_category%5D%5B%5D=21&termset%5Battachment_category%5D%5B%5D=22&termset%5Battachment_category%5D%5B%5D=19&termset%5Battachment_category%5D%5B%5D=20&termset%5Battachment_category%5D%5B%5D=24&termset%5Battachment_category%5D%5B%5D=18&termset%5Battachment_category%5D%5B%5D=23&filters_initial=1&filters_changed=0&qtranslate_lang=0&asp_highlight=1&current_page_id=5419

I have tried a few different things, like redirecting to another page containing the posts but does the same.
Any ideas?

[Ernest Marcinko]

Hi,

Thanks for the details!

I’m not sure where that ‘1’ is coming from. The highlighter should not work on Elementor Loop grid in the first place, it is not yet implemented.
For now I suggest turning it off for that, I have made a issue ticket on the development repository, hopefully we can come up with a solution for version 4.27.1

[kerry_avxz]

Ah ok no worries, that explains it 🙂

I have written some script to get around it for now:

document.addEventListener("DOMContentLoaded", function () {
  const params = new URLSearchParams(window.location.search);
  const keyword = params.get('asp_ls');
  if (!keyword) return;

  const container = document.querySelector('#highlighter');
  if (!container) return;

  const regex = new RegExp(<code>(${keyword})</code>, 'gi');

  // Recursive function to walk through text nodes
  function highlightTextNodes(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      if (regex.test(node.textContent)) {
        const span = document.createElement('span');
        span.innerHTML = node.textContent.replace(regex, '<mark>$1</mark>');
        node.replaceWith(span);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT" && node.nodeName !== "STYLE") {
      for (let i = 0; i < node.childNodes.length; i++) {
        highlightTextNodes(node.childNodes[i]);
      }
    }
  }

  highlightTextNodes(container);
});

[Ernest Marcinko]

That is a pretty neat solution, great job!

[Author]

Posts