title: Is it possible to highlight all words on a web page without destroying the layout?
body: <p>I've written an extension for firefox which highlights all words on a web page (excluding some words in a given list).</p>
  
  <p>What i've noticed is that (besides that my extension is terribly slow) some web pages get "destroyed", more specifically the layout gets destroyed (particularly websites with overlay advertising or fancy drop-down menus).</p>
  
  <p>My code wraps <code>&lt;span&gt;</code> tags around every "word", or to be precise around every token, because i'm splitting the text nodes with a whitespace as seperator.</p>
  
  <p>So is it possible anyway to realize this task without destroying the page's layout?</p>
  
  <p>I'm iterating over all text nodes, split them, and iterate over every token.
  When the token is in my list, i don't highlight it, else i wrap the <code>&lt;span&gt;</code> tag around it. </p>
  
  <p>So any suggestions how this could be done faster would be helpful, too.</p>
  
  <p>Here are some screenshots for a correctly highlighted and a not correctly highlighted web page:</p>
  
  <p>right:
  <a href="http://imgur.com/FyFunmo.jpg" rel="nofollow">en.wikipedia.org before highlighting</a>, 
  <a href="http://imgur.com/snw0K6v.jpg" rel="nofollow">en.wikipedia.org after highlighting</a>.</p>
  
  <p>wrong:
  <a href="http://imgur.com/glnLa4U.jpg" rel="nofollow">developer.mozilla.org before highlighting</a>, 
  <a href="http://imgur.com/gn9mOk0.jpg" rel="nofollow">developer.mozilla.org after highlighting</a>.</p>