CODEWITHSUNDEEP
javascripthtmldompersistence
Farhan
Farhan

Reputation: 67

How can I persist a highlighted selection using Javascript?

I want to highlight a selection of text on a web page. I have gone through this solution suggested by Tim Down which does half the job for me.

Now I need a way to highlight the text permanently. By permanently, I mean when I highlight some text, close the browser then re-open the page from local, the text should remain highlighted. Tim's solution keeps the text highlighted as long as I don't refresh or close the page. I guess I need to save the range's start and end offset somewhere so that next time I re-open the page I can highlight all the ranges again.

Edit: Sorry, forgot to mention that I am working on iPhone so I can keep an array of selections on local for a specific page. Any solution to store range for selection which can be nested or across multiple elements (e.g. div/p/span)?

Upvotes: 3

Views: 4357

Answers (4)

Mark Whitaker
Mark Whitaker

Reputation: 8605

Rangy is a really nice cross-browser range and selection library written by Tim Down since he wrote his answer to this question. Its Serializer module wraps up the kind of selector Tim has described (e.g. "0/1/2:34") and adds a couple of helper functions for persisting the result to a cookie. You can easily ignore the helper functions though and persist somewhere else, such as local storage or a web service.

All in all, it's an excellent solution to the problem of persisting a selection across browser sessions.

Upvotes: 1

Giulia Nicole Pernice
Giulia Nicole Pernice

Reputation: 763

Here's a precious finding: MASHA (short for Mark & Share) is a JavaScript utility allowing you to mark interesting parts of web page content and share it http://mashajs.com/

It is also on GitHub https://github.com/SmartTeleMax/MaSha

Works even on Mobile Safari and IE

Upvotes: 1

Tim Down
Tim Down

Reputation: 324627

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: Calculating text selection offsets in nest elements in Javascript

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"}'.

Upvotes: 4

sewa
sewa

Reputation: 1942

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

Upvotes: 1

Related Questions