2011-06-22 69 views
3

鑑於可變${text},其表示文本,如一個大塊...如何點擊時突出顯示一個句子?

...

隨着幾乎1800000 平方公里(700000平方mi) 利比亞是第四大國 非洲按地區劃分,世界第17大 [9]。首都的黎波里, 擁有170萬利比亞人的6.4 萬人。該國的三個傳統部分是Tripolitania, Fezzan和Cyrenaica。利比亞擁有非洲最高的人類發展指數 和截至2009年非洲 人均最高國內生產總值(PPP)最高的第四位,在塞舌爾之後, 赤道幾內亞和加蓬。這些是 很大程度上是由於其儲量大和石油儲量大。[10] [11] 利比亞擁有世界上第10大石油儲量 世界上第 和第17高石油 生產。

...

...我想,讓每一個句子是高亮,這樣,當一個人點擊該句子中的某個地方,這句話就會出現在屏幕上突出顯示(句子已經當它們被讀入${text}變量時被分開,所以如果需要,我可以讓${text}爲句子的數組)。

這是大的文本中突出顯示的句子應該是什麼樣子:

隨着近1800000平方公里(700,000平英里)的地區,利比亞是非洲第四大國的面積,以及17世界上最大的。[9] The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people.該國的三個傳統部分是Tripolitania,Fezzan和Cyrenaica。截至2009年,利比亞是非洲人類發展指數最高的國家,也是非洲人均國內生產總值(PPP)第四高,僅次於塞舌爾,赤道幾內亞和加蓬。這主要是由於其大量的石油儲量和低人口。[10] [11]利比亞擁有世界上任何國家的第10大石油儲量和第17大石油產量。


應該存儲突出顯示的句子,以便我能夠檢索該人點擊的突出顯示的句子。

我在想,這個問題將需要jQuery和各種變量容器的.select()來排序哪些句子突出顯示。如果您對如何解決此問題有任何建議,我將非常感激,因爲我一直在使用哪些方法和工具。謝謝。 =)

回答

5

將每個句子放在span標記中。例如:

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

+0

不錯,和比我的更好的實施。 – kinakuta

+0

+1輸入需要標識每個句子,因爲標點符號不是有效的分隔符(「170萬」)。 –

+0

@Bakak Naffas是的句子已經使用NLTK分開。 – honeywind

1

怎麼樣在一個跨度包裝的每個句子? http://jsfiddle.net/XBu7G/1/

編輯看起來我遲到了。

+0

感謝您的真正實施!它看起來很漂亮,我希望將來能夠順利編寫JavaScript/jQuery代碼。 – honeywind

1

假設你不想把每一句話在自己<span>,如Guffa建議,我建議這樣的:

綁定一個onclick事件到每個文本塊(例如<p>)。然後,當用戶點擊使用window.getSelection()(或在某些瀏覽器中使用document.selection)以獲取插入符的位置(即用戶點擊文本的位置)。

從你的問題來看,句子「已經分開」的方式並不完全清楚,但是你可以從插入符號中向後或向前搜索以找到句子的開始和結尾,或者使用其他更合適的方法到你的實現。

一旦你有了句子的開頭和結尾的索引,你就可以得到句子的文本並將其包裝在一個<span>中,以便突出顯示並跟蹤它。

顯然這是一個相當一般的概述,但它應該讓你開始。 jQuery.select()是有用的,但不會幫助你,因爲只有當用戶選擇文本時才觸發,而不是僅當他點擊時觸發。

爲了供您參考,Quirksmode有一個excellent article on Range,這是從document.getSelection()返回的對象種類。

+1

對我已經使用自然語言工具包(NLTK)來分隔句子。謝謝你的選擇;知道如何以多種方式做到這一點是很好的。 – honeywind