使用jQuery获取特定的行

Question

有没有办法使用jQuery获取一个块内容的第5行（第一个字母的偏移量）？

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

Answer 1

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<span/>') +
            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

工作原理：

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

Answer 2

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

算法基本上是这样的：

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

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

Answer 3

你可以使用javascript .split（）并用“＆lt; br＆gt;”分隔。

split tutorial