javascript - 如何获取光标在段落中的行号

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 的行号中

刚刚尝试了模型 fiddle

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
  	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>

如果你想玩一下，这里有一个 fiddle :https://jsfiddle.net/np8owsbv/2/

我也将 fiddle 绑定(bind)到窗口大小调整，并且似乎调整正确。还可以使用 .cursor 位置并查看其公平性。