Javascript에서 전체 div의 범위 오프셋을 얻으려면 어떻게해야합니까?

Question

나는 다음과 같은 방법을 사용하여 사용자의 선택에 따라 범위를 만드는 오전

:

내 텍스트를 선택 할 때마다

let before = text.substring(0, range[0]); 
let highlighted = text.substring(range[0], range[1]); 
let after = text.substring(range[1], text.length); 
return(
     <div> 
      {before} 
      <span style={{ 
       backgroundColor: 'yellow' 
      }}> 
       {highlighted} 
      </span> 
      {after} 
     </div> 
) 

는, 범위는 다음과 같습니다

var selection = window.getSelection(); 
var beginsAt = selection.getRangeAt(0).startOffset; 
var endsAt = selection.getRangeAt(0).endOffset; 
return [beginsAt,endsAt]; 

이 함수를 호출하는 구성 요소는 다음과 같은 작업을 수행을 항상 강조 표시된 범위가 끝나는 위치를 기준으로합니다. 따라서 내 텍스트가 0에서 50 사이의 범위에 있고 범위 [25,26]을 선택한 다음 [26,27] 범위를 선택하면 [26,27] 범위를 강조 표시하지 않고 [0, 1] 범위가 {after}에 의해 생성 된 텍스트와 비교하여 [0,1] 이었기 때문입니다.

{before}에 의해 렌더링 된 텍스트를 강조하는 한, 문제가 없으며 {after} 섹션에서 렌더링 된 것을 강조 표시 할 때만 해당됩니다.

이 범위 값은 렌더링되는 블록에 상대적인 것이 아니라 전체 텍스트의 루트에 상대적으로 어떻게 만들 수 있습니까? 이것이 반응 또는 구현의 한계입니까?

Answer 1

문제는 구현과 가장 확실하게 자바 스크립트 나 반응의 제한이 아닙니다. (최소한 여기에 질문이 제시되어 있습니다.)

인덱스를 부모 컨테이너에 맞게 강제 설정하는 대신 이전 선택을 기반으로 인덱스를 오프셋하는 것이 훨씬 쉽습니다.

선택을 얻는 방법

는 다음 포함하도록 수정 될 수

선택은 {후에} 렌더링 블록의 내부에있는 경우 상대성 플래그가 true

(relativityFlag) => { 
    var selection = window.getSelection(); 
    var beginsAt = selection.getRangeAt(0).startOffset; 
    var endsAt = selection.getRangeAt(0).endOffset; 

    if(relativityFlag){ 
     beginsAt += endsAt; 
     endsAt += endsAt; 
    } 
    return [beginsAt, endsAt] 
} 

.

이것은 색인을 더 큰 범위에 일치시키는 여러 가지 방법 중 하나이지만 구현이 가장 간단합니다.

Answer 2

대개 [0,1]이 (가) 현재 노드의 오프셋이므로 가져올 수 있습니다. 당신이 필요로하는 것은 부모 노드에있는 노드 집합 내의 오프셋입니다. 이 대답은 당신이 필요로하는 것 같아요 : https://stackoverflow.com/a/26477716/4650008