クリックして文章をハイライトする方法は？そのようなテキストの大きなブロックを表し

Question

与えられた変数${text}、...

...略1,800,000 平方キロメートルの面積（70万平方マイル）で

は、 リビアであります アフリカでは4番目に大きい国、アフリカでは世界で17番目に大きい [9]首都、トリポリ、 は170万人のリビアの6.4 人の住む人口です。国の3つの伝統的な は、Tripolitania、 Fezzan、およびCyrenaicaです。リビアはアフリカで HDIが最も高く、アフリカでは 1人当たりGDP（PPP）が最も高い 、セイシェルの後ろには 赤道ギニアとガボンがあります。これらは、大きく石油のために です 埋蔵量と人口が少ない[10] [11] リビアは、世界でどの国の埋蔵量でも10番目に大きい と17番目に高い石油 を生産しています。

...

...私は人が文の中にどこかをクリックすると、文は、その後の文章がすでにある（ハイライト表示されるように、それぞれの文はhighlightableことを可能にするしたいのですが変数が${text}変数に読み込まれたときに区切られているため、必要に応じて${text}を文の配列にすることができます）。

これは、大規模なテキスト内の強調表示文はどのように見えるかです：、ほとんど180万平方キロメートル（70万平方マイル）の面積を持つ

リビアは地域によってアフリカで4番目に大きい国、および17日です世界最大のものである[9]。 The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people.トリロチアニア、フェザン、キュレニアの3つの伝統的な国があります。リビアはアフリカでHDIが最も高く、アフリカではセイシェル、赤道ギニア、ガボンの後ろには1人当たりGDP（PPP）が4番目に高い。これらは主に石油埋蔵量が多く、人口が少ないために生じている[10] [11]リビアは世界のどの国の石油埋蔵量でも第10位、石油生産量は17位です。

---

強調表示された文章を保存して、その人がクリックしたハイライトされた文章を取得できるようにする必要があります。

この問題では、jQueryやさまざまな変数コンテナから.select（）を使用して、どの文章をハイライト表示するかをソートする必要があると考えています。どのように私がこれについて行くことができるかについてのご提案があれば、私はどのメソッドとツールを使用するかについているので非常に感謝しています。ありがとう。 =）

Answer 1

各文をスパンタグに入れます。例：

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

その後、あなたはクリックをキャッチし、スパン上のクラスを設定することができます。

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

は、選択されたスパンを作るためにCSSスタイルを使用して別々に表示されます。

.text .selected { background: #ff9; } 

へ選択した文章を取得するには、クラスを持つスパン要素を取得します。

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

デモ：http://jsfiddle.net/86FXr/

Answer 2

スパンで各文を折り返すのはどうですか？ http://jsfiddle.net/XBu7G/1/

EDIT私はこれに遅れていたようです。

Answer 3

Guffaが示唆するように、私はこのことを示唆している、あなたは独自の<span>内のすべての文章を入れたくないと仮定：

バインドテキストの各ブロックへのonclickイベントを（例えば<p>）。次に、ユーザーがwindow.getSelection()（または一部のブラウザではdocument.selection）をクリックしてキャレットの位置（つまり、ユーザーがクリックしたテキストの位置）を取得します。

あなたの質問から文が「既に分かれている」ということは全く分かりませんが、キャレットの前後を検索して文頭と末尾を見つけるか、より適切な方法を使用することができますあなたの実装に。

文の先頭と最後のインデックスを取得したら、文章のテキストを取得して<span>にラップして強調表示し、それを追跡することができます。

明らかにこれはかなり一般的な概要ですが、開始する必要があります。 jQuery.select()は役に立ちますが、ユーザーが単にクリックするときではなく、ユーザーがテキストを選択したときにのみトリガーされるため、ここでは役に立ちません。

参考までに、Quirksmodeにはexcellent article on Range、document.getSelection()から返されたオブジェクトの並べ替えがあります。