Javascript Girl
  1. Javascript Girl
  3. GetSelection & SurroundContents sur plusieurs balises
Intereting Posts
Comment détecter un événement de changement de contenu sur un div Pourquoi n'y a-t-il pas implicitement cela dans JavaScript CasperJS: liste déroulante; Sélectionnez une option, le code fonctionne dans un navigateur et un slimer mais pas avec un fantôme Ensemble fractionné en morceaux Somme de deux valeurs d'entrée par jquery Enregistrement du flux de données à partir de la demande POST dans GridFS, express, mongoDB, node.js Différence entre assigner une fonction à une variable ou non Comment puis-je modifier les options dans les menus déroulants si cela est généré dynamiquement? Calculer la vitesse par distance et frottement Javascript: détecte la zone de texte pour être pleine AWS Cognito – Identités authentifiées pour le développeur en JavaScript (navigateur) Correct moyen de référencer Javascript dans ASP.NET MVC? Empêcher window.onload étant annulé javascript Comment capturer l'entrée du pad tactile JQuery clique sur css hover events

GetSelection & SurroundContents sur plusieurs balises

J'ai un script qui modifie la couleur de fond du texte qui a été sélectionné. Cependant, je rencontre un problème lorsque le texte est sélectionné sur plusieurs éléments / tags.

Le code que j'ai est: 

var text = window.getSelection().getRangeAt(0); var colour = document.createElement("hlight"); colour.style.backgroundColor = "Yellow"; text.surroundContents(colour);

Et l'erreur de sortie est: 

 Error: The boundary-points of a range does not meet specific requirements. = NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR Line: 7

Je crois que cela concerne la fonction getRange () bien que je ne suis pas trop sûr de la façon de procéder car je suis débutant à javascript.

Y a-t-il une autre façon de reproduire ce que j'essaie d'atteindre?

Merci beaucoup.

    Cette question a été posée aujourd'hui: Comment puis-je mettre en surbrillance le texte de l'objet DOM Range?

    Voici ma réponse:

    Ce qui suit devrait faire ce que vous voulez. Dans les navigateurs non IE, il active le designMode, applique une couleur de fond puis éteint le designMode à nouveau.

    METTRE À JOUR

    Correction de travail dans IE 9. 

     function makeEditableAndHighlight(colour) { sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if (!document.execCommand("HiliteColor", false, colour)) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } function highlight(colour) { var range, sel; if (window.getSelection) { // IE9 and non-IE try { if (!document.execCommand("BackColor", false, colour)) { makeEditableAndHighlight(colour); } } catch (ex) { makeEditableAndHighlight(colour) } } else if (document.selection && document.selection.createRange) { // IE <= 8 case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } }

    Eh bien, je pense que l'utilisation de la bibliothèque mark.js est excellente dans ce cas. L'intention de la bibliothèque est de mettre en évidence toutes les instances d'un certain mot dans le document HTML, mais il peut être modifié via la fonction d'option de filtrage et des attributs d'étendue supplémentaires peuvent être ajoutés à chaque fonction d'option. 

     function markFunc(node, text, color) { var instance = new Mark(node); instance.mark(text, { "element": "span", "className": color, "acrossElements": true, "separateWordSearch": false, "accuracy": "partially", "diacritics": true, "ignoreJoiners": true, "each": function(element) { element.setAttribute("id", "sohayb"); element.setAttribute("title", "sohayb_title"); }, "done":function(totalMarks) { window.getSelection().empty();//This only in Chrome console.log("total marks: " + totalMarks); }, "filter": function(node, term, totalCounter, counter) { var res = false; if (counter == 0) { res = selectionRange.isPointInRange(node, selectionRange.startOffset); } else { res = selectionRange.isPointInRange(node, 1); } console.log("Counter: " + counter + ", startOffset: " + selectionRange.startOffset); return res; } }); };

    Vérifiez cet exemple JSFiddle pour le code complet qui met en évidence la sélection de l'utilisateur, même sur plusieurs éléments HTML.