Lors de la sélection des textes dans les documents HTML, on peut commencer à partir d'un élément DOM à un autre élément, en passant éventuellement sur plusieurs autres éléments sur le chemin. Utilisation de l'API DOM, il est possible d'obtenir la gamme de la sélection, les textes sélectionnés, et même l'élément parent de tous ces éléments DOM sélectionnés (en utilisant commonAncestorContainer ou parentElement () en fonction du navigateur utilisé). Cependant, il n'y a pas moyen que je suis au courant qui peut lister tous les éléments contenant des textes sélectionnés autres que d'obtenir l'élément parent seul qui les contient tous. En utilisant le parent et traversant les nœuds enfants ne le font pas, car il pourrait y avoir d'autres frères et sœurs qui ne sont pas sélectionnés dans ce parent.
Alors, il y a un moyen que je peux obtenir tous ces éléments qui contient les textes sélectionnés. Je suis principalement intéressé à obtenir les éléments de bloc (p, h1, h2, h3, etc ...) mais je crois que s'il y a un moyen d'obtenir tous les éléments, je peux passer par eux et les filtrer pour obtenir ce que je vouloir. Je salue toutes les idées et suggestions.
Merci.
4 Réponses :
On dirait que vous pouvez utiliser traverser de l'API de jQuery .
éventuellement .Contents ()
espère que cela aide!
Ouais les méthodes là-bas sont toutes super. Mais je ne crois pas que je puisse utiliser la plage de texte sélectionnée du navigateur comme une entrée pour ces méthodes, puis-je? Ou peut-être que je manque quelque chose ... merci
Vous pouvez utiliser mon Bibliothèque Rangy pour le faire. Il fournit une implémentation d'objets de plage DOM et de sélection pour tous les navigateurs, y compris IE, et présente des méthodes supplémentaires. L'un d'entre eux est getNodes () :
Je ne doute pas que ce code est le plus précis. Mais l'utilisation de votre lib est une overcilleuse pour mon cas en raison de la grande taille de la lib. Par conséquent, j'ai choisi l'autre réponse même s'il a des problèmes que je dois gérer. S'il y avait un choix de choisir deux réponses, je les marques sûrement. Continuez le grand lib / travail :)
@CRIA: assez juste. Ce que vous obtenez avec le mien est un soutien pour IE.
@Timdown Merci de votre travail sur Rangy. Il rend un ensemble de problèmes compliqués beaucoup plus facilement.
clé est Voici quelques échantillons de code que vous pouvez jouer avec pour faire ce que vous voulez. Mentionnant ce que vous voulez vraiment que cela soit en question aidera les gens à fournir de meilleures réponses. P> window.getselection (). getRangeat (0) code> https : //developer.mozilla.org/fr/dom/dom/range var selection = window.getSelection();
var range = selection.getRangeAt(0);
var allWithinRangeParent = range.commonAncestorContainer.getElementsByTagName("*");
var allSelected = [];
for (var i=0, el; el = allWithinRangeParent[i]; i++) {
// The second parameter says to include the element
// even if it's not fully selected
if (selection.containsNode(el, true) ) {
allSelected.push(el);
}
}
console.log('All selected =', allSelected);
Pas la solution parfaite comme vous l'avez dit, mais cela m'a donné une idée sur la façon de le faire. Par conséquent, j'ai choisi cela comme la réponse la plus correcte à mon besoin. Vraiment apprécier cela.
C'est une réponse décente, mais ne fonctionnera pas dans IE <9. Cela pourrait faire avec un chèque que la sélection existe avant d'appeler selection.getrangeat (0); aussi (à l'aide de la section Rangecount La propriété est la plus facile).
Il y a beaucoup de gotchas que je n'ai pas répondu, il s'agit simplement de commencer à se diriger dans la bonne direction. Votre bibliothèque nécessite 22K de JavaScript non compressé afin de le gérer vraiment et si j'en avais besoin, je voudrais simplement l'utiliser.
@Timdown, cela ne fonctionne pas non plus sur IE11, il y a donc 0 à savoir le support.
@Abdel: Je soupçonne que cela fonctionnera dans IE 11 avec l'ajout de selection.reMoveAllranges (); sélection.addrange (plage); .
@Timdown sélection.Containsnode ne fonctionne pas sur IE 11, ne suspect pas. Test .
Voici une approche ES6 basée sur la réponse de @juan Mendes:
Merci, je n'aurais jamais eu trébuché sur "Réduire" sans cela. Et si j'avais eu, je n'aurais probablement pas réalisé son utilité.