범위 사이의 경계 지점 비교

Question

제목이 맞는지 잘 모르겠습니다. 문제는 contenteditable 요소에 포커스가있을 때 커서 위치를 가져 오는 스 니펫을 발견했기 때문입니다. 나는 전체 코드를 이해하지만, 내가 잘하는 것을 모르는 5 가지 라인이있다.

확인. 이 선은 Treewalker에 매개 변수로 전달되는 함수입니다. 그리고 경계점을 비교하는 방법을 다루지 만, 어떻게, 그리고 무엇을 위해? 나는 많은 시간을 연구 해 왔으며, 아직 기능을 찾지 못했다.

function(node) { 
     var nodeRange = document.createRange(); 
     nodeRange.selectNode(node); 
     return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? 
      NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; 
    } 

전체 조각이가 (단지 문맥을 놓다)입니다 :

그것은 여기 작품에서 볼 수

function getCharacterOffsetWithin(range, node) { 
var treeWalker = document.createTreeWalker(
    node, 
    NodeFilter.SHOW_TEXT, 
    function(node) { 
     var nodeRange = document.createRange(); 
     nodeRange.selectNode(node); 
     return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? 
      NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; 
    }, 
    false 
); 

var charCount = 0; 
while (treeWalker.nextNode()) { 
    charCount += treeWalker.currentNode.length; 
} 
if (range.startContainer.nodeType == 3) { 
    charCount += range.startOffset; 
} 
return charCount; 
} 

document.body.addEventListener("keyup", function() { 
    var el = document.getElementById("test"); 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("position").innerHTML = "Caret char pos: " + getCharacterOffsetWithin(range, el); 
}, false); 

:

JS Fiddle 당신에게 많은 감사, 난 그냥 원하는 그것을 작업하기 전에이 물건을 이해하십시오. 긴 우편을 위해 유감스럽게 생각합니다.

Answer 1

내 코드는 다음과 같습니다 (this question). 달성하려는 작업에 지나치게 복잡하기 때문에 대신 사용하는 것이 좋습니다 simpler alternative to a similar question을 제공했습니다. 나는 이제 원래의 대답을 간단한 대답에 대한 링크로 업데이트했다.

그 기능이 무엇인지에 대한 질문은 노드를 필터링하는 것입니다. TreeWalker는 컨테이너 노드 내의 모든 텍스트 노드를 방문하여 선택의 끝 이전에 위치한 노드 만 생성합니다. 필터 함수는 각 텍스트 노드에서 호출되고 텍스트 노드를 포함하는 범위를 만들고 문서에서 텍스트 노드의 끝이 compareBoundaryPoints()을 사용하는 선택 범위 끝보다 먼저 있는지 확인합니다.