3

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)?

Community
  • 1
  • 1
Farhan
  • 67
  • 2
  • 6
  • 1
    found a way to store range http://home.arcor.de/martin.honnen/javascript/storingSelection1.html – Farhan Sep 04 '10 at 09:54

4 Answers4

4

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

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 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 Aug 31 '10 at 12:55
  • found a way to store range on this link. http://home.arcor.de/martin.honnen/javascript/storingSelection1.html – Farhan Sep 04 '10 at 09:58
  • 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 Sep 06 '10 at 10:57
1

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

Giulia Nicole Pernice
  • 753
  • 1
  • 7
  • 11
  • How do you make it not expand the selection to words? (be able to select a few words within a word, for example) – Iulius Curt Feb 12 '14 at 22:24
1

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.

Mark Whitaker
  • 8,465
  • 8
  • 44
  • 68
1

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
  • 1,894
  • 1
  • 13
  • 8