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 요소 내에서 사용자 선택의 문자 오프셋을 정확하게 결정할 수 있습니다.