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

Question

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

...

面积近 1,800,000 平方公里（700,000 平方英里）， 利比亚是世界第四大国 非洲地区，第 17 大 在世界上。 [9]首都的黎波里， 是利比亚 6.4 人口中 170 万人的家园 万人。三个传统 该国部分地区是的黎波里塔尼亚， 费赞和昔兰尼加。利比亚拥有 非洲最高的人类发展指数和第四 非洲人均国内生产总值（PPP）最高 截至 2009 年，在塞舌尔之后， 赤道几内亚和加蓬。这些是 主要是由于其大量的石油 储量和人口稀少。[10][11] 利比亚拥有第 10 大已探明石油 世界上任何一个国家的储量 和第 17 高的石油 生产。

...

...我想让每个句子都可以突出显示，这样当一个人单击句子中的某个位置时，该句子就会突出显示（当它们被读入 @987654322 时，这些句子已经分开了@ 变量，所以我可以让${text} 成为句子的数组（如有必要）。

这是大文本中突出显示的句子的样子：

利比亚面积近 1,800,000 平方公里（700,000 平方英里），按面积计算是非洲第四大国家，世界第 17 大国家。[9] The capital, Tripoli, is home to 1.7 million of Libya's 6.4 million people. 该国的三个传统地区是的黎波里塔尼亚、费赞和昔兰尼加。截至 2009 年，利比亚的人类发展指数在非洲最高，人均国内生产总值 (PPP) 在非洲排名第四，仅次于塞舌尔、赤道几内亚和加蓬。这主要是由于其巨大的石油储量和低人口。[10][11]利比亚拥有世界上第 10 大已探明石油储量和第 17 高石油产量。

---

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

我认为这个问题将需要 jQuery 中的 .select() 和各种变量容器来对突出显示的句子进行排序。如果您对如何解决此问题有任何建议，我将不胜感激，因为我一直纠结于使用哪些方法和工具。谢谢。 =)

Answer 1

如何将每个句子包装在一个跨度中？ http://jsfiddle.net/XBu7G/1/

编辑看来我迟到了。

Answer 2

假设您不想按照 Guffa 的建议将每个句子都放在自己的 <span> 中，我建议这样做：

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

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

获得句子开头和结尾的索引后，您可以获取句子的文本并将其包裹在 <span> 中，以便突出显示并跟踪它。

显然，这是一个相当笼统的概述，但它应该可以帮助您入门。 jQuery.select() 很有用，但在这里对您没有帮助，因为它仅在用户选择文本时触发，而不是仅在单击时触发。

供您参考，Quirksmode 有一个 excellent article on Range，这是从 document.getSelection() 返回的那种对象。

Answer 3

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

然后你可以捕捉点击并在 span 上设置一个类：

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

使用 CSS 样式使选定的 span 以不同的方式显示：

.text .selected { background: #ff9; }

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

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

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