使用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);

在源中，選擇可以包含多個范圍，並且矩形可以在同一行上，因此您需要添加一些代碼來檢查它。

希望這可以幫助！