상위 컨테이너 내에서 선택 항목의 시작 및 끝 오프셋을 얻는 방법은 무엇입니까?

상위 컨테이너를 기준으로 범위의 시작 및 끝 오프셋 가져오기

HTML 문서에서 사용자 선택은 다양한 요소와 텍스트 노드로 확장될 수 있습니다. . 선택 항목의 상위 컨테이너 내 문자의 정확한 범위를 결정하는 것은 어려울 수 있습니다. 그러나 브라우저 변형에 관계없이 이를 달성하기 위해 다양한 기술을 활용할 수 있습니다.

한 가지 접근 방식은 선택 범위를 복제하고 해당 끝점을 상위 컨테이너의 시작과 끝으로 설정하는 것입니다. 결과 텍스트 내용을 원래 선택 범위와 비교하여 상위 항목을 기준으로 시작 및 끝 오프셋을 계산할 수 있습니다. 다음은 JavaScript의 예입니다.

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 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;
  return { start: start, end: end };
}

이 방법은 HTML 태그 및 텍스트 노드 순회를 고려하여 상위 컨테이너 내에서 시작 및 끝 오프셋을 모두 제공합니다. 텍스트 편집 도구, 콘텐츠 조작 스크립트 등 정확한 문자 오프셋이 필요한 다양한 애플리케이션에 사용할 수 있습니다.

위 내용은 상위 컨테이너 내에서 선택 항목의 시작 및 끝 오프셋을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!