How to highlight a sentence when clicked on?

Question

Given variable ${text} , which represents a large block of text such as ...

...

With an area of almost 1,800,000 square kilometres (700,000 sq mi), Libya is the fourth largest country in Africa by area, and the 17th largest in the world.[9] The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people. The three traditional parts of the country are Tripolitania, Fezzan, and Cyrenaica. Libya has the highest HDI in Africa and the fourth highest GDP (PPP) per capita in Africa as of 2009, behind Seychelles, Equatorial Guinea and Gabon. These are largely due to its large petroleum reserves and low population.[10][11] Libya has the 10th-largest proven oil reserves of any country in the world and the 17th-highest petroleum production.

...

... I'd like to allow each sentence to be highlightable, such that when a person clicks somewhere within the sentence, the sentence will then appear highlighted (the sentences are already separated when they're read into the ${text} variable, so I can let ${text} be an array of the sentences if necessary).

This is what the highlighted sentence within the large text should look like:

With an area of almost 1,800,000 square kilometres (700,000 sq mi), Libya is the fourth largest country in Africa by area, and the 17th largest in the world.[9] The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people. The three traditional parts of the country are Tripolitania, Fezzan, and Cyrenaica. Libya has the highest HDI in Africa and the fourth highest GDP (PPP) per capita in Africa as of 2009, behind Seychelles, Equatorial Guinea and Gabon. These are largely due to its large petroleum reserves and low population.[10][11] Libya has the 10th-largest proven oil reserves of any country in the world and the 17th-highest petroleum production.

---

The highlighted sentences should be stored, such that I'll be able to retrieve the highlighted sentences that the person clicks.

I'm thinking that this problem will require .select() from jQuery and various variable containers to sort which sentences are highlighted. If you have any suggestions on how I can go about this, it would be very much appreciated as I'm at stuck on which methods and tools to use. Thanks. =)

Answer 1

Put each sentence in a span tag. Example:

<div class="text">
<span>With an area of almost 1,800,000 square kilometres (700,000 sq mi), Libya is the fourth largest country in Africa by area, and the 17th largest in the world.[9]</span>
<span>The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people.</span>
</div>

Then you can catch the clicks and set a class on the span:

$('.text span').click(function(){ $(this).toggleClass('selected') });

Use a CSS style to make the selected span appear differently:

.text .selected { background: #ff9; }

To get the selected sentences, just get the span elements that have the class:

var sentences = $('.text .selected');

Demo: http://jsfiddle.net/86FXr/

Answer 2

How about wrapping each sentence in a span? http://jsfiddle.net/XBu7G/1/

EDIT Looks like I was late with this one.

Answer 3

Assuming you don't want to put every sentence in its own <span> , as Guffa suggests, I would suggest this:

Bind an onclick event to each block of text (eg <p> ). Then when the user clicks use window.getSelection() (or document.selection in certain browsers) to get the position of the caret (ie where in the text the user clicked).

It's not totally clear from your question in what way the sentences are "already separated," but you can either search backwards and forwards from the caret to find the beginning and end of the sentence, or use some other method more appropriate to your implementation.

Once you have the indices of the beginning and the end of the sentence you can get the text of the sentence and wrap it in a <span> in order to highlight it and keep track of it.

Obviously this is a fairly general overview but it ought to get you started. jQuery.select() is useful but won't help you here because it's only triggered when the user selects text, not when he merely clicks.

For your reference, Quirksmode has an excellent article on Range , the sort of object returned from document.getSelection() .