Highlight word in HTML text (but not markup)

javascript, regex

Solution

Demo: http://jsfiddle.net/crgTU/7/

highlightWord(document.body,'para');

function highlightWord(root,word){
  textNodesUnder(root).forEach(highlightWords);

  function textNodesUnder(root){
    var n,a=[],w=document.createTreeWalker(root,NodeFilter.SHOW_TEXT,null,false);
    while(n=w.nextNode()) a.push(n);
    return a;
  }

  function highlightWords(n){
    for (var i; (i=n.nodeValue.indexOf(word,i)) > -1; n=after){
      var after = n.splitText(i+word.length);
      var highlighted = n.splitText(i);
      var span = document.createElement('span');
      span.className = 'highlighted';
      span.appendChild(highlighted);
      after.parentNode.insertBefore(span,after);
    }
  }
}
​

You might also consider calling something like…

function removeHighlights(root){     
  [].forEach.call(root.querySelectorAll('span.highlighted'),function(el){
    el.parentNode.replaceChild(el.firstChild,el);
  });
}

…before you go finding the new highlights (to remove old highlights from the DOM).

Problem

I'm trying to highlight all matching word inside the body but not words inside any html tag. For example the keyword given is 'para'. Here's the paragraph: ``` <p class="para"> Example of paragraph. Lorem ipsum dolor sit amet. </p> ``` resulting in: ``` <p class="para"> Example of <strong>para</strong>graph. Lorem ipsum dolor sit amet. </p> ``` I know that this is possible with JavaScript's `replace()` but I just don't know much about regex.

Original source

Related problems