javascript - 如何计算从根 div 到 focusNode 的文本长度？

Question

root想象一下，我有一个带有一堆子节点的节点树（顶级），如下所示：

<div id="root" contenteditable="true" >
  Inside div <span>Inside span </span><a>Inside link </a><span>Inside span </span>Inside div again
</div>

当我单击 this中的任何位置时div，我会focusNode根据我的单击获得一个（简单单击，而不是单击并按住以进行选择）。

const selection = window.getSelection();
const focusNode = selection.focusNode; // This is the node where the caret is

问题

root在找到 之前，我如何计算文本focusNode？遍历所有可能的孩子并一路添加每个文本长度。找到focusNode后，返回总值。

注意：我没有使用 jQuery。

function handleClick() {
  const root = document.getElementById('root');
  const selection = window.getSelection();
  const focusNode = selection.focusNode;
  
  countTextFromRootToFocus(root,focusNode);
}


function countTextFromRootToFocus(root,focusNode) {

  console.log('Text length from root to focus is: XXX');
}

#root {
  border: 1px dotted blue;
}

<p>Click anywhere inside the div</p>
<div id="root" contenteditable="true" onclick="handleClick()">
  Inside div <span>Inside span </span><a>Inside link </a><span>Inside span </span>Inside div again
</div>

标签： javascripthtml