[WORKAROUND] Replacing DOM text breaks template reactivity

help
1

I display some template

      {{#each entries}}
        {{> dirEntry}}
      {{/each}}

Then I am highlighting searched words, replacing DOM text.

  entries() {
    const s = Session.get('searchTxt');
    if(s) {
      Meteor.setTimeout(function() {
        highlight(s);
      }, 1000);
    }
    return findLeads();
  },

const highlightTextNodes = function(element, regex) {
  var tempinnerHTML = element.innerHTML;
  element.innerHTML = tempinnerHTML.replace(regex, '>$1<span class="highlighted">$2</span>$3<');
};

const highlight = function(searchString) {
  // Starting node, parent to all nodes you want to search
  const regexString = orbiter.core.txt2insensitiveregex(searchString);
  var nodes = document.getElementsByClassName("entry");
  _.each(nodes, function(node) {
    // The regex is the secret, it prevents text within tag declarations to be affected
    var regex = new RegExp(">([^<]*)?(" + regexString + ")([^>]*)?<", "ig");
    highlightTextNodes(node, regex);
  });

};

This breaks the template and it loses all reactivity behaviour. Every child templates autorun also are broken.

How can I highlight words client side without breaking the template ?

2

Hi,
have you tried to use Spacebars.SafeString?
I think that could do the trick.
http://blazejs.org/api/spacebars.html#SafeString

3

Thanks for your reply.
But I’m not sure how to use SafeString.

element.innerHTML = Spacebars.SafeString(tempinnerHTML.replace(regex, '>$1<span class="highlighted">$2</span>$3<'));

replaces the content, but still breaks the template.
Obviously that’s element.innerHTML = the heart of the problem. I’m guessing replacing html like that does no good.

4

For the record, if I don’t replace all the text of my templace with document.getElementsByClassName(“entry”); but only replacing what’s safe to replace by wrapping it with
<div class="safeToReplace"> ... </div>
and using
document.getElementsByClassName("safeToReplace");

I can highlight searched keywords without breaking the other parts of the template and thus keeping in shape what needs to be reactive.
I’ll go with that workaround for now.