获取具有插入符号位置的元素的子节点索引到其contenteditable父元素

Question

现在我之前已经问过这个问题，它被标记为重复这个问题Get caret position in contenteditable div including tags但事实上它完全不同。

让我们说我有一个可信的div，其中也有一些元素

<div id="text" contenteditable="true"><b>abc</b><nav>def</nav><span>ghi</span></div>

现在，如果光标或插入符号位置在span元素内，我如何将span元素的索引作为其子元素div的子节点。所以我可以得到这个结果

divNode = document.querySelector('div');
caretEle = //get the caret position element which will be span
spanIndex = //probably divNode.indexOf(caretEle) which will be = 2
caretEle = divNode.childNodes[spanIndex];

注意：我不是在寻找插入符号位置，我想将插入符号位置元素的子索引转换为其父元素。即我想得到<span>元素的子索引到<div id="text" contenteditable="true">

例如：

node = document.getElementById('text');
node.childNodes[0] == <b>
node.childNodes[1] == <nav>
node.childNodes[2] == <span>

Answer 1

var s = window.getSelection();
var an = s.anchorNode;
var fn = s.focusNode;

anchorNode是选择开始的地方，而focusNode是选择结束的地方。非常重要的是要记住anchorNode是用户最初开始选择的地方，所以如果他们从右到左选择，anchorNode将在右侧，而如果他们从左到右选择文本anchorNode将在左侧。