Skip to content

how to get highlighted text positions using jquery

I am trying to create a text highlighter. below is the example of the html structure.

<div id="donthighlight">Sea no iuvaret epicurei conceptam, id dicunt sensibus expetenda</div>
<div id="highlightarea">Lorem ipsum dolor sit amet, an zril splendide est, discere accusam</div>

If I select the word “Lorem” from the second div, I should be able to capture the starting character position and ending character position, and add a span tag around it with a class. this will highlight the background of the text temporarily. function should only work within the second div.

I Also want to save those character positions in DB, so that the next time user visit the same article I should be able show the previously highlighted parts. Also user should be able to remove highlights.

I tried a few jquery plugins and was unable complete my requirements. How can I make this work? Any help would be appreciated


I found exactly what I was looking for. find the link below to the plugin