HTML 要素内の文字オフセットを正確に決定するにはどうすればよいですか?

親コンテナを基準とした範囲の開始オフセットと終了オフセットの計算

以下のような HTML 要素があったとします。

<div> <p>そして、ユーザーはマウスで「ホーム」というテキストを選択します。 「#parent」要素内の文字オフセットを決定することは、特に HTML タグを選択する場合によく行われるタスクです。</p>
<p>「range.startOffset」プロパティは直接のコンテナに対する相対的なオフセットを提供しますが、文字オフセットに限定されます。コンテナがテキストノードの場合。この制限を克服するために、更新されたソリューションを紹介します:</p>
<pre class="brush:php;toolbar:false">function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      start = preCaretRange.toString().length;
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      end = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}

更新されたメソッドをデモンストレーションするために、イベント リスナーを初期化して選択の変更をキャプチャし、ページ上のログ要素を更新します:

function reportSelection() {
  var selOffsets = getSelectionCharacterOffsetWithin(
    document.getElementById("editor")
  );
  document.getElementById("selectionLog").innerHTML =
    "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}

window.onload = function () {
  document.addEventListener("selectionchange", reportSelection, false);
  document.addEventListener("mouseup", reportSelection, false);
  document.addEventListener("mousedown", reportSelection, false);
  document.addEventListener("keyup", reportSelection, false);
};

このコードを使用すると、HTML タグを選択している場合でも、HTML 要素内でユーザーが選択した文字のオフセットを正確に判断できます。