document.getSelection 选择中有回车 return

Question

我尝试了很多不同的东西，但不知所措。下面的代码说明了这个问题。我有一个可编辑的元素。

如果我select一段文字，Selection.anchorNode是一个#text节点。

如果在 select 编辑一个段落时，我在该段落之前添加了一个回车符 return，则 Selection.anchorNode 是包含跨度的元素。

我需要知道的是从 span 元素的 innerText 值开始的偏移量。当 return 不包含在 selection 中时，我可以简单地分析 anchorNode 的兄弟节点。但是当 return 包含在 selection 中时，我似乎没有实现这一点的信息。

任何关于我遗漏的指导都将不胜感激。

function showResult() {
  let sel = document.getSelection();
  document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " +  sel.anchorNode.nodeName;
}
document.getElementById("textContainer").innerText = "This is the first paragraph\n\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";

#textContainer {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

#output {
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

<div>
    <span id="textContainer" contenteditable="true"></span>
</div>
<input  type="button" onclick="showResult()" value="Write selection object to console" />
<div id="output">
</div>

Answer 1

似乎浏览器 return 父节点选择回车 return 所以你可以使用 if 这种情况的条件:

sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName

function showResult() {
  let sel = document.getSelection();
  document.getElementById("output").textContent ="document.getSelection().anchorNode.nodeName: " +  (sel.anchorNode.hasChildNodes()?sel.anchorNode.childNodes[0].nodeName:sel.anchorNode.nodeName);
}
document.getElementById("textContainer").innerText = "This is the first paragraph\n\nSelecting this paragraph with and without the preceding carriage return yields very different anchorNodes";

#textContainer {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

#output {
  position: relative;
  width: 400px;
  height: 100px;
  border: 1px solid steelblue;
  margin: 5px;
}

<div>
    <span id="textContainer" contenteditable="true"></span>
</div>
<input  type="button" onclick="showResult()" value="Write selection object to console" />
<div id="output">
</div>

document.getSelection 选择中有回车 return

document.getSelection with carriage return in selection

javascript

selection

dom-selection