highlight a word in a page

gistfile1.js

let word = "Mozilla";

// set the walker for non-empty text node 
let walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_TEXT,
  { acceptNode: (node) => node.nodeValue.trim().length && NodeFilter.FILTER_ACCEPT }
);
 
// collecting the nodes
let nodes = [];
while(walker.nextNode()) nodes.push(walker.currentNode);

// collecting the ranges from the previous node,
// where the content matches the string given (`word`)
let ranges = [];
for (let node of nodes) {
  let text = node.nodeValue;
  
  let index = text.indexOf(word);
  
  while(index > -1) {
    let range = document.createRange();

    range.setStart(node, index);
    range.setEnd(node, index + word.length);

    ranges.push(range);
    
    index = text.indexOf(word, index + 1);
  }
}

// clearing the nodes - we don't need them anymore
nodes.length = 0;

// adding marks to the matching text
let marks = [];
for (let range of ranges) {
  let mark = document.createElement("mark");
  mark.textContent = word;
 
  range.deleteContents();
  range.insertNode(mark);
  
  marks.push(mark);
}

// clear the ranges - we don't need them anymore
ranges.length = 0;

// clear - using a timeout, in case of code execution
// from web console / scratchpad
setTimeout(() =>{
  for (let mark of marks) {
    let node = document.createTextNode(mark.textContent);
    let range = document.createRange();

    range.selectNode(mark);
    range.deleteContents();
    range.insertNode(node);
  
    // normalize the parent, to unify the text nodes again
    node.parentNode.normalize();
  }
  
  // clear the marks - we don't need them anymore
  marks.length = 0;
}, 4000);