html - plage de sélection - obtention de la plage + nœud de départ + nœud de fin + distance

Question

De previous question pour sélectionner du texte html spécifique, j'ai traversé this link pour comprendre la plage en chaîne html.

Pour sélectionner un texte spécifique à la page html. Nous devons suivre ces étapes.

Assumed 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> 

java script pour effectuer une sélection par plage

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 

Je veux faire de la manière inverse. Je veux dire, supposons que la sélection est faite par l'utilisateur sur le navigateur (safari). Ma question est la suivante: comment pouvons-nous obtenir un nœud de départ (comme nous avons ici le nœud p) et un nœud de terminaison (comme nous avons ici le deuxième nœud li) et la gamme (comme nous l'avons ici 13,17) ?

Edit: mes efforts (De 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); 
    } 

Mais, pourtant, je suis confus au sujet de faire comme si sélectionné est premier alinéa ou deuxième ou troisième, ou sélectionné est en première position ou la deuxième position ou ce ....

Answer 1

le stockage de la plage sélectionnée est simple. Ce qui suit va retourner seulement la première plage sélectionnée (Firefox supporte au moins des sélections multiples):

<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 aura des propriétés startContainer (le nœud contenant le début de la plage), startOffset (un décalage dans le noeud de conteneur de départ : un caractère décalé dans le cas des noeuds de texte et de l'enfant dans les éléments de décalage), endContainer et endOffset (behvaiour équivalent aux propriétés de démarrage). Range est bien documenté par its specification et MDC.

Dans IE, range contiendra un TextRange, qui fonctionne très différemment. Plutôt que des nœuds et des offsets, TextRanges sont concernés par les caractères, les mots et les phrases. Le site de Microsoft contient de la documentation: http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx, http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx.