Highlight a word in a text without .innerHTML

Question

I need to highlight text in an HTML document with JavaScript that will be part of a webextension. The use of .innerHTML would cause a rejection in the review process. See innerHTML Security considerations.

I need to highlight text as a link:

<p>Lorem ipsum dolor sit amet</p>

⬇

addLinkWithoutInnerHTML('ipsum');

⬇

<p>Lorem <a href="/ipsum">ipsum</a> dolor sit amet</p>

How can I pull this off without using .innerHTML?

Answer 1

You can use indexOf to look for all occurrences of a string in the textContent of the element and use appendChild to add anchor elements.

function addLink(el, text){
  let t = el.textContent;
  el.textContent = '';
  let idx, prev = 0;
  while((idx = t.indexOf(text, prev)) !== -1){
    el.append(t.slice(prev, idx));
    const a = document.createElement('a');
    a.href = '/' + text;
    a.textContent = text;
    el.appendChild(a);
    prev = idx + text.length;
  }
  el.append(t.slice(prev));
}
addLink(document.querySelector('p'), 'ipsum');

<p>Lorem ipsum dolor sit amet</p>