小编典典

使用jQuery获取特定行

ajax

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

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


阅读 261

收藏
2020-07-26

共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/>在每个单词中插入一个元素。跨度的最高偏移量已缓存-
当此偏移量更改时,我们可以假定我们在新行上。

2020-07-26