comment obtenir le texte sélectionné, mais puis-je obtenir le contexte environnant en javascript?

Question

Je suis en mesure de saisir le texte que l'utilisateur a sélectionné sur une page Web, en utilisant ce code:

function getSelected() { 
    var userSelection; 
    if (window.getSelection) { 
     selection = window.getSelection(); 
    } else if (document.selection) { 
     selection = document.selection.createRange(); 
    } 

} 

est-il posible pour moi d'obtenir les mots autour le mot sélectionné.

Prenez ces phrases par exemple: « Si vous devez framglubble le zartbox, alors vous devriez acheter le widget de rouge Sinon, vous pouvez acheter le widget bleu et économiser de l'argent. ».

Mon code va me dire si la personne a choisi le mot « widget ». Mais j'aimerais savoir si la sélection est après "rouge" ou "bleu". Est-ce que est-ce possible? J'ai récuré Internet pour obtenir des conseils, et J'ai de la difficulté à trouver une réponse.

merci pour votre aide

Answer 1

J'ai écrit le script rapide qui permet d'identifier la partie avant la sélection et après sélection à l'intérieur du même élément DIV. Cependant, si le même DIV contient le même mot plus d'une fois et que vous ne sélectionnez que ce mot, le code courant que j'ai écrit ne peut pas identifier s'il s'agit du premier ou du deuxième mot sélectionné, donc il ne répondra pas à vos besoins .

Quoiqu'il en soit, vous pouvez voir/copier/tester le code ici: http://jsfiddle.net/kvHxJ/ Sélectionnez quelque chose et regardez l'alerte qui s'affiche. Si c'est suffisant pour vos besoins après tout, super, acceptez cette réponse et passez à autre chose ... sinon je dois savoir: pouvons-nous supposer que l'utilisateur sélectionnera des mots entiers seulement, un seul mot? Si la réponse est oui, j'ai une idée de comment contourner cela.

Answer 2

La façon de le faire dans les navigateurs non-IE est d'obtenir un objet Range du selection. La plage a une limite de début et de fin, et chaque limite de la plage est exprimée comme un décalage dans un noeud; Si la limite est dans un nœud de texte, ce décalage sera un décalage de caractère.

Par exemple, si ce qui suit est un nœud de texte et la sélection est délimité par des tuyaux:

"red |widget| blue widget" 

... alors la plage que vous obtiendrez de la sélection aurait un décalage de 4 à l'intérieur le noeud de texte.

Ce qui suit vous obtiendrez une plage représentant la sélection et alerter la limite de début:

var sel = window.getSelection(); 
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null; 
if (range) { 
    alert("Offset " + selectedRange.startOffset 
     + " in node " + selectedRange.startContainer.nodeName); 
} 

Ranges peut être comparé à d'autres gammes, donc si vous vouliez savoir, par exemple, si la sélection actuelle est venu après le mot « bleu » dans le nœud de texte ci-dessus, vous pouvez créer une plage englobant le mot « bleu » et le comparer avec la plage sélectionnée:

// Assume the text node is stored in a variable called textNode 
var blueRange = document.createRange(); 
blueRange.setStart(textNode, 11); 
blueRange.setEnd(textNode, 15); 

var selectionIsAfterBlue = 
    (selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1); 

dans IE, rien de tout cela fonctionne et tout est fait différemment , généralement avec beaucoup plus de difficulté. Pour normaliser cela à une seule interface cohérente, vous pouvez utiliser ma bibliothèque Rangy.

Answer 3

IE a l'ensemble des méthodes move, ce qui réduit ce problème à seulement quelques lignes pour étendre la sélection vers l'avant ou vers l'arrière tout nombre de mots (voir http://www.webreference.com/js/column12/trmethods.html). À partir de là, il suffit de comparer le texte à toute liste de valeurs arbitraires. Les autres navigateurs n'ont pas cette fonctionnalité AFAIK. Sort des guerres de navigateur: on développe une caractéristique impressionnante ignorée ou barrée par un brevet de toute autre, de sorte que la fonctionnalité est à jamais perdue et évitée comme le fardeau du support cross-navigateur pour toutes ces innovations tombe inévitablement carrément sur les concepteurs de sites Web. Donc, ci-dessous est une fonction généralisée pour obtenir seulement l'ID de l'élément parent du texte sélectionné. Et, pour travailler avec cette solution multi-navigateur, vous devez envelopper chaque mot dans son propre élément complet avec un identifiant unique ou un autre attribut. Avec cette configuration, il devrait alors être un saut relativement indolore pour regarder en avant et en arrière chez les frères ou les éléments id'd/nommés séquentiellement. L'attrape ici est que le client doit cliquer/glisser depuis le début du mot ou de la phrase jusqu'à la fin, et absolument pas d'espaces limitrophes. Même un double-clic sur un mot le fera référencer l'élément suivant (ou dans le cas de IE, le DIV parent). En outre, vous devez ajouter du code pour restreindre la limite de sélection à un DIV parent unique, car le code ci-dessous peut également étendre la sélection aux éléments environnants. Mais j'espère que vous pourrez réparer cela d'ici. Dans le cas contraire, il s'agit d'utiliser des vecteurs pour localiser les coordonnées d'un texte par rapport à l'ensemble du texte qui l'entoure.

 

<script type="text/javascript"> 

function get_selected_element_id() { 
if (window.getSelection) { 
    // FF 
    var range = window.getSelection(); 
    } 
else if (document.selection) { 
    // IE 
    var range = document.selection.createRange(); 
    } 
if (range.focusNode) { 
    // FF 
    var test_value = range.focusNode.parentNode.id; 
    } 
else { 
    // IE 
    var test_value = range.parentElement().id; 
    } 
return test_value; 
} 


</script> 

</head> 

<body> 

<div id="test_div"> 
<span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span> 
</div> 

<button onclick="alert(get_selected_element_id());">go</button>