컨테이너 요소 내에서 텍스트 선택의 시작 및 끝 오프셋을 얻는 방법은 무엇입니까?

컨테이너를 기준으로 텍스트 선택의 시작 및 끝 위치 가져오기

문제:

다음을 고려하세요 HTML:

<div>
<p>사용자가 이 요소에서 "home" 텍스트를 선택했다고 가정합니다. #부모 컨테이너를 기준으로 이 선택 항목의 시작 및 끝 오프셋을 어떻게 결정할 수 있습니까?</p>
<p><strong>답변:</strong></p>
<p>range.startOffset 속성은 원하는 기능을 제공하는 것으로 보입니다. 이지만 직접 컨테이너 내에서만 오프셋을 나타냅니다. 또한 컨테이너가 텍스트 노드인 경우 문자 오프셋만 나타냅니다.</p>
<p><strong>업데이트된 코드:</strong></p>
<p>다음은 시작과 노드를 모두 올바르게 반환하는 업데이트된 코드 버전입니다. 및 끝 오프셋:</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 };
}