获取具有插入符号位置的元素的子节点索引到其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是用户最初开始的地方，这非常重要，因此，如果他们从右向左进行选择，{{1 }}将位于右侧，而如果他们从左至右选择文本，则anchorNode将位于左侧。