Javascript 如何突出显示离鼠标最近的文本行？

我有一个很长的文本，我想为用户提供一个阅读帮助：当前行应该突出显示。为了简化，我将只使用鼠标的Y坐标（这样，鼠标指针就不会碍事）。我有一个id为

content

的大DIV，它填充了整个宽度，还有一个小DIV，它包含文本（）的类

content

---

我正在使用jQuery1.4。如何突出显示最接近当前鼠标位置的文本行？

我看不出在没有明确包装文本（即换行符或

元素）的情况下如何可行地进行此操作

据我所知，DOM无法发现特定文本片段的包装位置，无论是字符还是像素（包括我所知道的），更不用说文本可以呈现的动态特性，比如浏览器的文本缩放功能

但是，如果您能够以某种方式生成/注入显式的行结束符，那么我想我可以为您提供一个解决方案

编辑
多亏了Pekka回答中的精彩信息，我拼凑出了一个功能原型，但它有一个重要的警告——只适用于纯文本内容。元素主体中的任何HTML都将被剥离


jQuery.fn.wrapLines=函数（openTag、closeTag）
{
var dummy=this.clone（）.css({
顶部：-9999，
左：-9999，
位置：'绝对'，
宽度：this.width（）
}).appendTo（此.parent（））
，text=dummy.text（）.match（/\S+\S+/g）；
var words=text.length
，lastTopOffset=0
，行=[]
，lineText=“”
;
对于（变量i=0；i
span.line{
显示：内联；
}
跨距线：悬停{
背景颜色：浅蓝色；
}


12345678910 111213141516171819 111213141516171819
想到的最佳方法是将每一行拆分为一个
或
元素，该元素具有
：hover
CSS类和“highlight”设置：

span.line:hover { background-color: lightblue; }

这将是最便宜的解决方案，因为浏览器将自行处理所有高亮显示。如果您想要奇特的效果，您仍然可以通过向每行添加
mouseover
和
mouseout
事件来实现

当然，最困难的部分是在浏览器的换行处将内容分割成几行。您需要动态地执行此操作，以便线条实际反映浏览器打断文本的位置

也许这个问题的公认答案是朝着正确方向迈出的一步：


工作原理：

它遍历整个元素（实际上是元素的克隆），在每个单词中插入一个元素。跨度的顶部偏移量被缓存-当该偏移量发生变化时，我们可以假设我们在新行上

不确定jQuery在这里是否会对您有很大帮助，但您可以看看
元素.getClientRects
方法，在和上有文档记录。更具体地说，at MSDN有点类似于您想要实现的功能，它使用一个巧妙的z索引
div
元素高亮显示行，该元素位于
getClientRects（）
返回的坐标处的文本后面

通过循环遍历文档的
onmousemove
中返回的TextRectangle对象，检查鼠标光标的y值是否在每个矩形的顶部和底部，并将巧妙的z索引div移动到相同的位置/高度，您应该能够实现同样的效果

当前所有主流浏览器都支持
getclientracts（）



更新-使用Chrome、IE6/7/8、Firefox、Opera、Safari。我在其他浏览器中遇到的最初问题与
DIV
需要
display:inline


再次更新-我必须参考此答案了解一些新的问题，因此我花时间对其进行更新，以重新调整窗口大小上的线条。看起来其他人也在玩，现在是第15版
 遍历DOM，使用offsetwidth+parent.offsetwidth获取元素的绝对位置，等等。我的答案中包含了一个可能的解决方案。@Tom--除了你链接到的问题比这个问题新两年，所以从技术上讲，另一个问题是这个问题的重复one@Tom：加上下面的答案（使用
getClientRects（）
）适用于具有不同行高的文本。；-）现在这两个问题都是重复的。奇怪的是，这很合适……很好的发现，在另一个问题中，这是一个很好的创造性方法，可以在任意文本中发现一行。我同意，这是一个创造性的方法，但是如果有，比如说，1000个单词，这不是很慢吗？在这种情况下，您可能会认为DOM插入会非常昂贵。@Andy在我看来，这种方法的最大优点是它的JavaScript页面负载很重，但不是在实际高亮显示完成时，而进行实时高亮显示的解决方案会一直进行计算。此外，我认为DOM插入即使在较慢的机器上也是合理的，但这取决于