I want to insert an element(span,div etc) at the position determined by user selection of text in the document.

I was able to get the element on which selection is made. But I am not able to get the exact position where the selection is made.

For example:

```
<span>this is testing string for testing purpose</span>

```

In this, lets assume that user selected 2nd 'testing' word. I want it to be replaced like 

```
<span>this is testing string for <b>testing</b> purpose</span>

```

How do i do it?

BTW: I know it is possible. Google Wave does it. I just dont know how to do it