Finds all (case-insensitive) text occurrences. Beware: replaces html, so event listener will get lost

highlight_text_in_vanilla_js.js

window.highlightText = (element, highlightText, styleOrClass = 'highlight') => {
  let elements = [];
  let html = element.innerHTML;
  let newHTML = [];
  let style = '';
  let klass = '';
  if (styleOrClass.includes(':')) {
    style = styleOrClass;
  } else {
    klass = styleOrClass;
  }
  
  for(let i=0; i < html.length; i++) {
    if (html[i] === '<') {
      elements.unshift('<');
    } else if ((html[i] === '>') && (elements[0] === '<')) {
      elements.shift()
    }
    if ((elements.length === 0) && (html[i] !== '>')) {
      // we are not in a tag attribute area
      let nextText = html.substr(i, highlightText.length);
      if (nextText.toLowerCase() === highlightText.toLowerCase()) {
        newHTML.push(`<span class="${klass}" style="${style}">${nextText}</span>`)
        i = i + nextText.length - 1;
      } else {
        newHTML.push(html[i]);
      }
    } else {
      newHTML.push(html[i]);
    }
  }
  element.innerHTML = newHTML.join('');
}