Highlight word in HTML text (but not markup)

by

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).

More Related Contents:

  1. Javascript Array – Split string at numbers [closed]
  2. Why do regex constructors need to be double escaped?
  3. How can I match a whole word in JavaScript?
  4. How do I get the YouTube video ID from a URL?
  5. How can I match overlapping strings with regex?
  6. Javascript and regex: split string and keep the separator
  7. Javascript Regex: How to put a variable inside a regular expression? [duplicate]
  8. Javascript RegExp + Word boundaries + unicode characters
  9. How to escape regular expression special characters using javascript? [duplicate]
  10. How to pull the file name from a url using javascript/jquery?
  11. JavaScript regular expression for Unicode emoji
  12. How to extract base URL from a string in JavaScript?
  13. Regular Expression For Arabic Language
  14. grunt (minimatch/glob) folder exclusion
  15. Split string into sentences in javascript
  16. JavaScript regex – How to wrap matches with tag?
  17. Split a string based on multiple delimiters
  18. Emulating SQL LIKE in JavaScript
  19. How can I match on, but exclude a regex pattern?
  20. Why can’t I use accented characters next to a word boundary?
  21. Trim spaces from start and end of string
  22. How to convert a Title to a URL slug in jQuery?
  23. Is there a way to measure string similarity in Google BigQuery
  24. javascript regex : only english letters allowed
  25. Javascript function need allow numbers, dot and comma
  26. Remove everything within script and style tags
  27. URL regex validation
  28. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  29. JavaScript: RegExp constructor vs RegEx literal
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment