Question

给定变量${text}，它代表一大块文本，例如......

...

面积近1,800,000   平方公里（700,000平方英里），   利比亚是中国第四大国   非洲按面积计算，并排名第17位   在世界上。[9]首都的黎波里，   是利比亚的6.4万人的家园   百万人。三个传统   该国部分地区是Tripolitania，   Fezzan和Cyrenaica。利比亚拥有   非洲人均HDI最高，第四   非洲人均GDP最高（PPP）   截至2009年，落后塞舌尔，   赤道几内亚和加蓬。这些是   主要是因为它的石油很多   储备和人口稀少。[10] [11]   利比亚拥有第十大探明石油   世界上任何国家的储备   和第17高的石油   生产

...

...我想允许每个句子都是可突出的，这样当一个人点击句子中的某个地方时，句子就会突出显示（当句子被读入{{时，句子已经分开了） 1}}变量，所以如果需要，我可以让${text}成为句子的数组。

这是大文本中突出显示的句子应如下所示：

利比亚面积近1,800,000平方公里（700,000平方英里），是非洲第四大区域，也是世界第17大国家。[9] ${text}该国的三个传统地区是Tripolitania，Fezzan和Cyrenaica。截至2009年，利比亚的非洲人类发展指数最高，非洲人均国内生产总值（PPP）排名第四，仅次于塞舌尔，赤道几内亚和加蓬。这主要是由于其庞大的石油储量和低人口。[10] [11]利比亚拥有世界上任何一个国家的第十大探明石油储量，并且是石油产量的第17位。

应该存储突出显示的句子，以便我能够检索用户点击的突出显示的句子。

我认为这个问题需要来自jQuery和各种变量容器的.select（）来排序突出显示的句子。如果您对我如何解决这个问题有任何建议，我将非常感激，因为我坚持使用哪些方法和工具。谢谢。 =）

Answer 1

将每个句子放在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; }

要获取所选的句子，只需获取具有该类的span元素：

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

演示：http://jsfiddle.net/86FXr/

Answer 2

如何在一个范围内包装每个句子？ http://jsfiddle.net/XBu7G/1/

编辑看起来我迟到了。

Answer 3

假设你不想把每个句子放在自己的<span>中，正如Guffa建议的那样，我会建议：

将onclick事件绑定到每个文本块（例如<p>）。然后，当用户点击使用window.getSelection()（或某些浏览器中的document.selection）来获取插入符号的位置（即用户点击的文本中的位置）。

从你的问题来看，句子“已经分开”的方式并不完全清楚，但是你可以从插入符号向后和向前搜索以找到句子的开头和结尾，或者使用其他更合适的方法。你的实施。

一旦你得到了句子开头和结尾的索引，你就可以得到句子的文本并将其包装在<span>中，以便突出显示它并跟踪它。

显然这是一个相当笼统的概述，但它应该让你开始。 jQuery.select()很有用，但在此不会对您有所帮助，因为它仅在用户选择文字时触发，而不是仅在用户点击时触发。

作为参考，Quirksmode有excellent article on Range，这是从document.getSelection()返回的对象类型。

单击时如何突出显示一个句子？

3 个答案: