html - 선택 범위 - 범위 가져 오기 + 시작 노드 + 끝 노드 + 거리

Question

내 previous question에서 특정 html 텍스트를 선택하려면 this link을 통해 html 문자열의 범위를 이해해야합니다.

html 페이지에서 특정 텍스트를 선택하십시오. 우리는이 단계를 따라야합니다.

가정되는 HTML :

<h4 id="entry1196"><a 
    href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html" 
    class="external">Call for a Blogger's Code of Conduct</a></h4> 

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p> 

<ol> 
    <li>Take responsibility not just for your own words, but for the 
     comments you allow on your blog.</li> 
    <li>Label your tolerance level for abusive comments.</li> 
    <li>Consider eliminating anonymous comments.</li> 
</ol> 

자바 스크립트는 내가 반전 방법으로이 작업을 수행 할 범위

var range = document.createRange(); // create range 
var startPar = [the p node];   // starting parameter 
var endLi = [the second li node]; // ending parameter 
range.setStart(startPar,13);   // distance from starting parameter. 
range.setEnd(endLi,17);    // distance from ending parameter 
range.select();      // this statement will make selection 

에 의해 선택을 할 수 있습니다. 브라우저 (사파리)에서 사용자가 선택했다고 가정합니다. 제 질문은 어떻게 시작 노드 (여기서 'p 노드')와 끝 노드 (여기에 '두 번째 li 노드'가 있는지)와 범위를 얻을 수있는 것입니다 (여기에 13,17 개가 있습니다) ?

편집 : (this question에서) 내 노력

var sel = window.getSelection(); 

    if (sel.rangeCount < 1) { 
     return; 
    } 
    var range = sel.getRangeAt(0); 
    var startNode = range.startContainer, endNode = range.endContainer; 

    // Split the start and end container text nodes, if necessary 
    if (endNode.nodeType == 3) { 
     endNode.splitText(range.endOffset); 
     range.setEnd(endNode, endNode.length); 
    } 

    if (startNode.nodeType == 3) { 
     startNode = startNode.splitText(range.startOffset); 
     range.setStart(startNode, 0); 
    } 

하지만, 아직 내가 선택한 경우, 같은 것에 대해 혼란 스러워요 먼저 제목 또는 두 번째 제목 또는 무엇에 두 번째 또는 세 번째, 또는 선택하거나 첫 번째 단락입니다 ....

Answer 1

선택한 범위를 저장하는 것은 간단합니다. 다음은 첫 번째 선택된 범위를 리턴한다 (파이어 폭스 적어도 다중 선택을 지원)

<script type="text/javascript"> 

function getSelectionRange() { 
    var sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

var range; 

</script> 
<input type="button" onclick="range = getSelectionRange();" 
    value="Store selection"> 

range가 등록 정보 startContainer (범위의 시작을 포함하는 노드) startOffset있을 것이다 (AN 시작 컨테이너 노드 내 오프셋 : 텍스트 노드의 경우 문자 오프셋 및 요소의 자식 오프셋), endContainer 및 endOffset (시작 속성과 동일). Range은 its specification 및 MDC으로 잘 문서화되어 있습니다.

range에는 TextRange이 포함되어 있습니다. 이는 매우 다르게 작동합니다. TextRanges는 노드와 오프셋이 아닌 문자, 단어 및 문장과 관련이 있습니다. Microsoft의 사이트에는 몇 가지 문서가 있습니다 : http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx, http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx.