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/