ansaurus

Question

Answer 1

+1 A:

An option to save data locally would be to use cookies: http://www.w3schools.com/js/js_cookies.asp

or the HTML5 localStorage: http://people.w3.org/mike/localstorage.html

But the obvious drawback is that it's tied to the current browser and computer. If you want something more persistant, you'd want to use some kind of server side help. What are your requirements?

I guess you could then save start and end positions and then at page load re-create the range using document.createRange and then the methods setStart and setEnd

https://developer.mozilla.org/en/DOM/document.createRange https://developer.mozilla.org/en/DOM/range.setStart

sewa 2010-08-31 09:16:20

Answer 2

A:

You need two things: some means of serializing the selection and some means of saving it. Cookies and/or local storage would do for the saving part. For the serializing/deserializing, I'd suggest creating some kind of path through the DOM using child node index at each level to specify the selection boundaries. See this answer to a similar question: http://stackoverflow.com/questions/3373167/calculating-text-selection-offsets-in-nest-elements-in-javascript/3375463#3375463

Edit: summary of the linked solution

The user's selection can be expressed as a Range object. A Range has a start and end boundary, each expressed in terms of an offset within a node. What the the answer I linked to is suggesting is serializing each boundary as a path though the DOM that represents the node, coupled with the offset. For example, for the following document with the selection boundaries represented by |:

<html><head><title>Foo</title></head><body>On|e <b>t|wo</b><div>

... you could represent the selection start boundary as "1/0:2", meaning offset 2 within the child node at position 0 of the child node at position 1 in the document root. Similarly the end boundary would be "1/1/0:1". You could represent the whole thing JSON as '{"start":"1/0:2",end:"1/1/0:1"}'.

Tim Down 2010-08-31 09:37:42

i didn't get what he is doing.I can have div,span,p,any valid tag.is there any way to extract the range info while selection.I like your highlighting solution and want to extend it for my problem.any solution for that?

Farhan 2010-08-31 12:55:04

Updated my answer.

Tim Down 2010-08-31 17:01:26

found a way to store range on this link. http://home.arcor.de/martin.honnen/javascript/storingSelection1.html

Farhan 2010-09-04 09:58:28

That is very similar to what I'm suggesting. I didn't suggest XPath in the first place because of concerns over cross-browser compatibility.

Tim Down 2010-09-06 10:57:33

ansaurus

tags:

views:

answers:

highlight selection through javascript

related questions