How can I wrap the previous, current, and next word inside a tag using jQuery?

Not sure if the title is well chosen...

I am trying to simulate text-selection in HTML/JS/CSS to get rid of the action bubble on mobile device when truly selecting texts.

To be more specific, I'm trying to avoid this:

The visual:

The way I built it and it may change because it doesn't matter, is that the text selected is wrapped inside a span.selection and inside that tag, there are also two caret used as handlers:

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

Ideally, it would be fun to use a drag-n-drop to select more or less texts but I believe this would be darn hard to do and in that case, maybe using click on the carets to select either the previous or the following word and wrap it inside the .selection wouldn't be that bad.

Here is the jsfiddle: http://jsfiddle.net/m6Qx4/

The surrounding texts may contains HTML tags too such as: <i>, <b>, <span> and <ul>/<li> may be present making the parsing harder.

Any ideas how this can be done?

Status Update:

I have actually ma