如何获得光标的行号段

Question

<div class="content" contenteditable="true"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div> 

的JavaScript的这个代码是

var divheight = $(".content").height(); 
var lineheight = $(".content").css('line-height').replace("px",""); 
alert(Math.round(divheight/parseInt(lineheight))); 

CSS是

.content { 
    line-height:20px; 
} 

例如，如果内部.content的<span class="cursor"></span>

点击

.cursor { 
    border-left: 1px solid black; 
    margin-left: -1px; 
    color: #2E3D48; 
} 

如何找到.cursor是在矿井.content

刚刚试过样机小提琴的行数

https://jsfiddle.net/1ok3dah9/

Answer 1

非常原始例如（假设.cursor是目标，我们可以推断出其行高找到偏移量）：

;(function($){ 
 
    // $(...).lineNumber([cursorClassName = 'cursor']); 
 
    // Locates the pseudo-line number of the .cursor within the target element. 
 
    // This is based on two thigns: 
 
    // 1. The target element has a line-height, and 
 
    // 2. The target element has a .cursor element we can position 
 
    // Basic math is performed based on line-height and the .cursor's current 
 
    // vertical offset. 
 
    $.fn.lineNumber = function(cursorClassName) { 
 
    // in case we wanted to target a new class name 
 
    cursorClassName = 'cursor'; 
 
    
 
    // locate the cursor within the current element 
 
    \t var $cursor = this.find('.'+cursorClassName); 
 
    if ($cursor.length) { // check for .cursor 
 
     var lineHeight = parseInt($cursor.css('line-height').match(/\d+/)[0]), 
 
      topPosition = $cursor.position().top; 
 
     // divide top offset by line height. Apply integer division and return 
 
     // the approx. line number. In this case, lines are zero-based, so offset 
 
     // by 1. 
 
     return ~~(topPosition/lineHeight) + 1; 
 
    } 
 
    return -1; // no match 
 
    }; 
 
})(jQuery); 
 

 
$('.lineNumber').text($('.content').lineNumber()); 
 
// Go full-screen to see it work based on window size (e.g. word-wrapping) 
 
$(window).on('resize', function(){ 
 
    $('.lineNumber').text($('.content').lineNumber()); 
 
});

.content { 
 
    line-height:20px; 
 
} 
 
.cursor { 
 
    border-left: 1px solid black; 
 
    margin-left: -1px; 
 
    color: #2E3D48; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="content" contenteditable="true"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived<span class="cursor"></span> not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 

 
<pre>Line #: <span class="lineNumber" style="color:#f00;"></span></pre>

这里有一个小提琴，如果你想打转转：https://jsfiddle.net/np8owsbv/2/

我绑定的小提琴窗口大小调整以及和似乎正常调整。也可以玩.cursor的位置，看看它如何展示。