javascript - selection() range() および DOM を処理して、div 内のテキストのインデックスを取得する

Question

ユーザーが特定の div id 内のテキストを選択すると、内部の html タグを無視してその選択の開始インデックスと終了インデックスを返す Java スクリプトをまとめようとしています。

次の例を検討してください。

<p>Some text that will be ignored</p>
<div id="X">
    <p>Here is some text that should be considered</p>
    <p>Here is a bit more <span>tex</span>t in a separate paragraph but the same div id</p>
</div>

さて、ハイライトbe considered. Here isして使うと

var currentRange = window.getSelection().getRangeAt(0);

console.log('startContainer\t'+currentRange.startContainer);
console.log('startOffset\t'+currentRange.startOffset);
console.log('endContainer\t'+currentRange.endContainer);
console.log('endOffset\t'+currentRange.endOffset);
console.log('textLength\t'+currentRange.toString().length);
console.log('text\t'+currentRange.toString())

startOffset:29 と endOffset: 4 を取得します。

私の質問：

<p>Range() オブジェクトを使用しているときに、自分がどのタグの中にいるかを追跡することはできますか? 最終的には、この div タグにさらに多くの html 要素を含める予定ですが、内部のすべての html 要素を無視して、すべてが 1 つの文字列であるかのように、選択範囲のインデックス範囲を取得できるようにしたいと考えています。

助けてくれてありがとう！