Question: Let's pretend my page has the following:

```
<p>This is the first sentence</p>
<p>This is the 2nd sentence.  This is the third.</>

```

If I double click on "This" in "This is the first sentence" i want to highlight (change its background color to yellow) that occurrence of the word "This"

If I double click on "This" in "This is the 2nd sentence" i want to highlight it AND continue showing any already created highlights.

If I double click on "This" in "This is the first sentence" after its been highlighted i want to change its background color back to the original AND continue showing any already created highlights.

If I double click on "third." I want to highlight "third"

i've seen numerous examples of how to do this with jQuery BUT they end up highlighting all occurrences of the selected word. so in the above example if i clicked on "This" in "This is the first sentence" then all occurrences of "This" would be highlighted.

does anyone know how to highlight only the double clicked word?

Answer: 
If you are using jQuery, this will work.

```
$(document).dblclick(function(){
    $("html").attr("contenteditable", "true")
    document.execCommand("hiliteColor", false, "yellow")
    $("html").attr("contenteditable", "false")
})

```

**Update:** I made a [jsFiddle](http://jsfiddle.net/quk5q/)
i ended up wrapping each word in and attaching a click function to it (is that what jquery calls .click(function(){})?)

i created two css classes: one with background=transparent and the other with background=yellow

the function detected the class and switched it as appropriate