Javascript Girl
  1. Javascript Girl
  3. Déterminez quels éléments DOM la sélection de texte actuelle contient
Intereting Posts
Angularjs ng-controller avec résolution Utilisation de Jquery dans l'application Codeignitor pour mettre à jour les div toutes les 10 secondes Retarder le rendu de l'élément dom lors du changement de propriétés Combobox multi-choix avec ExtJs Que peut faire le prototype JavaScript au-delà de l'imitation d'un système de classe classique? Aurelia DI avec interfaces dactylographiées Qu'est-ce que store.select dans ngrx Qu'est-ce que le signe $ signifie dans Jquery ou JavaScript? Javascript Détectez l'événement de clic en dehors de div Comment utiliser le plugin jQuery Validation avec une validation côté serveur au niveau du formulaire? Comment se débarrasser de l'alerte de déconnexion Connect 3.0? Définissez par programmation la valeur d'un élément HTML de type = "fichier" d'entrée? Comment lancer une application Chrome à partir d'une extension Chrome? La superposition d'image Jquery? Window.getselection () ne fonctionne pas dans FF et chrome

Déterminez quels éléments DOM la sélection de texte actuelle contient

Je veux savoir quels éléments DOM sont présents dans le texte actuellement sélectionné par l'utilisateur dans le navigateur.

Document.getSelection () nous obtiendrait le texte actuellement sélectionné. Mais comment déterminer les éléments DOM contenus dans cette sélection de texte?

window.getSelection() vous donne un objet de sélection . Utilisez selection.rangeCount et selection.getRangeAt() pour obtenir un objet Range représentant la sélection souhaitée.

Maintenant, vous pouvez obtenir le premier et le dernier noeud dans la sélection de range.startContainer / startOffset et range.endContainer / endOffset . Vous pouvez alors monter et descendre l'arbre pour ramasser tous les éléments entre ces deux positions, par exemple. En utilisant la fonction getElementsBetweenTree() partir de cette réponse .

Malheureusement, le modèle TextRange d'IE est totalement différent du standard W3 et HTML5, et en général, bien pire. Il n'abandonne pas les positions de début et de fin presque aussi facilement et pas de manière fiable. Tout ce que vous obtenez est parentElement pour vous dire l'ancêtre commun, et à partir de là, vous êtes limité à deviner où la gamme est basée sur la création d'une nouvelle gamme et en appelant moveToElementText , puis compareEndPoints avec la plage de sélection. Et si vous devez connaître la sélection de texte exacte, vous moveStart alors en fonction de moveStart / moveEnd la gamme et la comparaison, ce qui n'est pas du tout amusant.