使用jQuery获取特定的行

有没有办法使用jQuery得到一个块内容的第5行(它的第一个字母的偏移量)?

我的意思是视觉线,浏览器计算线,而不是源代码中的行。

jQuery.fn.line:

jQuery.fn.line = function(line) { 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, lineNumber = 0, ret = '', found = false; for (var i = 0; i < words; ++i) { dummy.html( text.slice(0,i).join('') + text[i].replace(/(\S)/, '$1') + text.slice(i+1).join('') ); var topOffset = jQuery('span', dummy).offset().top; if (topOffset !== lastTopOffset) { lineNumber += 1; } lastTopOffset = topOffset; if (lineNumber === line) { found = true; ret += text[i]; } else { if (found) { break; } } } dummy.remove(); return ret; }; 

用法:

 $('#someParagraph').line(3); // blah blah blah 

示例: http//jsbin.com/akave

这个怎么运作:

它遍历整个元素(实际上是元素的克隆),在每个单词中插入元素。 跨度的顶部偏移量被缓存 – 当这个偏移量发生变化时,我们可以假设我们正在换行。

好吧,有一种方法可以猜测它,它并不漂亮,但我以前用过它。

算法基本上是这样的:

  1. 创建一个“测试”节点,绝对位于要测量的块内。
  2. 在该测试节点中放入一些文本。
  3. 获取该测试节点的高度。 (我们称之为H.)这是你估计的一条线的高度。
  4. 现在创建一个重复的块,其中没有文本。
  5. 迭代循环,该循环将 – a)从块中获取内容,并一次向新的重复块添加一个单词。 b)检查块的高度。 如果高度介于4H和6H之间,那么您就在第5行的范围内。 将该文本附加到缓冲区变量。
  6. 您的缓冲区变量将包含第五行显示的文本。

它不漂亮,但如果您正确复制元素,它会起作用。

你可以使用javascript的.split()并通过“
”进行删除。

拆分教程