title: javascript user selection highlighting
body: <p>I'm trying to find a way with javascript to highlight the text the user selects when they click some odd highlight button (as in &lt;span style="background-color:yellow"&gt;highlighted text&lt;/span&gt;). It only has to work with either WebKit or Firefox, but it seems to be well nigh impossible because it has to work in the following cases:</p>
  
  <pre><code>&lt;p&gt;this is text&lt;/p&gt;
  &lt;p&gt;I eat food&lt;/p&gt;
  </code></pre>
  
  <p>When the user selects from "is text" through "I eat" in the browser (can't just put a span there).</p>
  
  <p>and this case:</p>
  
  <pre><code>&lt;span&gt;&lt;span&gt;this is text&lt;/span&gt;middle text&lt;span&gt;this is text&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>When the user selects from "is text" to "this is" in the browser (even though you can wrap your highlight spans around each element in the selection, I'd like to see you try to get that middle text highlighted).</p>
  
  <p>This problem doesn't seem to be solved anywhere, frankly I doubt it's possible.</p>
  
  <p>It would be possible if you could get the Range that you get from the selection as a string complete with html which could be parsed and then replaced, but as far as I can tell you can't get the raw html of a Range.. pity.</p>