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

Question

我的文本很长，我想为用户提供阅读帮助：当前行应突出显示。为方便起见，我将只使用鼠标的 Y 坐标（这样，鼠标指针就不会碍事）。我有一个 ID 为 content 的大 DIV，它填充了整个宽度，还有一个带有 content 类的小 DIV，用于文本 (see here for an example)。

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

Answer 1

不确定 jQuery 是否能帮到你，但你可以看看 element.getClientRects 方法，记录在 MSDN 和 MDC 上。更具体地说，MSDN 上的 this example 有点类似于您想要实现的目标，使用巧妙的 z 索引 div 元素突出显示行，该元素位于 getClientRects() 返回的坐标处的文本后面。

您应该能够通过循环遍历文档onmousemove 中返回的 TextRectangle 对象并检查鼠标光标的 y 值是否 > 顶部和

目前所有主流浏览器都支持getClientRects()。

---

http://jsbin.com/avuku/15

已更新 - 适用于 Chrome、IE6/7/8、Firefox、Opera、Safari。我在其他浏览器中遇到的最初问题与 DIV 需要是 display: inline 有关。
再次更新 - 对于一些较新的问题，我必须参考这个答案，所以我花时间更新它以重新计算窗口调整大小的行。好像其他人也在玩，现在是第 15 版。

Answer 2

如果没有明确包装的文本（即换行符或<br> 元素），我看不出你怎么能做到这一点。

据我所知，DOM 无法以字符方式也不以像素方式发现特定文本的包裹位置 - 包括我所知道的 @987654321 @ - 更不用说文本可以假设的动态性质，例如浏览器的文本缩放功能。

但是，如果您能够设法生成/注入显式行尾，那么我想我有一个适合您的解决方案。

编辑

感谢 Pekka 回答中的精彩信息，我拼凑了一个功能原型，但它有一个重要的警告 - 仅适用于纯文本内容。任何呈现元素主体的 HTML 都会被剥离。

jQuery.fn.wrapLines = function( openTag, closeTag )
  {
    var dummy = this.clone().css({
            top: -9999,
            left: -9999,
            position: 'absolute',
            width: this.width()
        }).appendTo(this.parent())
      , text = dummy.text().match(/\S+\s+/g);

    var words = text.length
      , lastTopOffset = 0
      , lines = []
      , lineText = ''
    ;

    for ( var i = 0; i < words; ++i )
    {
      dummy.html(
          text.slice(0,i).join('') +
          text[i].replace(/(\S)/, '$1<span/>') +
          text.slice(i+1).join('')
      );

      var topOffset = jQuery( 'span', dummy ).offset().top;

      if ( topOffset !== lastTopOffset && i != 0 )
      {
        lines.push( lineText );
        lineText = text[i];
      } else {
        lineText += text[i];
      }

      lastTopOffset = topOffset;
    }
    lines.push( lineText );

    this.html( openTag + lines.join( closeTag + openTag ) + closeTag );
  };

  $(function()
  {
    $('p').wrapLines( '<span class="line">', '</span>' );
  });

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="max-width:400px">
 one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three
</p>

Answer 3

想到的最佳方法是将每一行拆分为 <span> 或 <div> 元素，其中包含带有“突出显示”设置集的 :hover CSS 类：

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

这将是最便宜的解决方案，因为浏览器将自行处理所有突出显示。如果你想要花哨的效果，你仍然可以通过在每一行添加 mouseover 和 mouseout 事件来实现。

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

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

Getting a specific line using jQuery

它是如何工作的：

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