javascript - 使用 Javascript 在选择中查找换行符？

Question

请原谅下面的业余内容，它来自试图编写代码的设计师:D

我在这里试图实现的是返回用光标选择/突出显示的行数。我所说的“行”指的是用户可见的内容，而不是一行 HTML 代码(目前正在执行)。另外，我所说的“换行符”不是指 HTML 标记，而是打印中断或“软回车”。

所以我目前停留在 selection.split("\n") 上，当然它只在“新行”处拆分。有没有一种方法可以通过换行符来拆分选定的字符串？

希望这一切都有意义!

function measure() {
  var str = window.getSelection();
  var selection = str.toString();
  var arr = selection.split("\n");
  if (arr != ""){
    document.getElementById('length').innerHTML = arr.length;
  }
  else {
    document.getElementById('length').innerHTML = "0";
  }
};

document.addEventListener('mouseup', measure, false);

body {
  width: 80%;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p><em>Selected lines:</em> <span id="length">0</span></p>

Answer 1

您可以尝试找出有多少个矩形组成了选区。如果您检查它们从哪里开始，您应该能够计算出选择了多少行。代码是这样的:

function measure() {
  var str = window.getSelection();

  var range = str.getRangeAt(0);
  var rects = range.getClientRects();
  document.getElementById('length').innerHTML = rects.length;
};

document.addEventListener('mouseup', measure, false);

当然，一个选择可以包含多个范围，并且矩形可以位于同一行，因此您需要添加更多代码来检查这一点。

希望这对您有所帮助!