Comment puis-je mettre en évidence le texte de l'objet DOM Range?

Question

Je sélectionne du texte sur la page html (ouverte dans firefox) en utilisant la souris, et en utilisant les fonctions javascript, je crée/récupère l'objet rangeobject correspondant au texte sélectionné.

userSelection =window.getSelection(); 
var rangeObject = getRangeObject(userSelection); 

Maintenant, je veux souligner tout le texte qui vient sous les rangeobject.I je fais comme ça,

var span = document.createElement("span"); 
    rangeObject.surroundContents(span); 
    span.style.backgroundColor = "yellow"; 

Eh bien, cela fonctionne très bien, que lorsque le rangeobject (startpoint et point final) se trouve dans le même textnode, il met en évidence le correspondant text.Ex

<p>In this case,the text selected will be highlighted properly, 
     because the selected text lies under a single textnode</p> 

Mais si le rangeobject couvre plus d'un textnode, il ne fonctionne pas properlay, il met en évidence que les textes se situer dans la première textnode, Ex

<p><h3>In this case</h3>, only the text inside the header(h3) 
    will be highlighted, not any text outside the header</p> 

Toute idée de comment puis-je faire, tous les textes qui vient sous rangeobject, a souligné, indépendamment du fait que plage se trouve dans un seul nœud ou plusieurs nœuds? Merci ....

Answer 1

Je suggère d'utiliser document ou TextRange méthode execCommand, qui est construit à cette fin, mais est généralement utilisé dans les documents modifiables. Voici la réponse que j'ai donnée à une question similaire:

Ce qui suit devrait faire ce que vous voulez. Dans les navigateurs non IE, il active designMode, applique une couleur d'arrière-plan, puis désactive à nouveau designMode.

MISE À JOUR

fixe pour travailler dans IE 9.

changement 12 Septembre 2013

Voici un lien détaillant une méthode pour éliminer les points saillants créés par cette méthode:

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) { 
    var range, 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; 
    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); 
    } 
} 

Answer 2

Pourriez-vous préciser le besoin de cette fonctionnalité. Si vous voulez seulement changer le style de surbrillance du texte sélectionné, vous pouvez utiliser CSS: « :: sélection »

Plus d'info: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

Pouvez-vous essayer d'ajouter une classe pour la durée environnante et appliquer CSS hiérarchique?

var span = document.createElement("span"); 
span.className="selection"; 
rangeObject.surroundContents(span); 

Dans la définition CSS,

span.selection, span.selection * { 
    background-color : yellow; 
} 

Je n'ai pas essayé. Mais juste deviner que ça marcherait.

Answer 4

Rangy est une bibliothèque multi-navigateur et de sélection qui résout parfaitement ce problème avec ses CSS Class Applier module.Je l'utilise pour mettre en œuvre la mise en évidence sur une gamme de navigateurs de bureau et sur iPad et cela fonctionne parfaitement.

La réponse de Tim Down est excellente, mais Rangy vous évite d'avoir à écrire et à gérer vous-même tout ce code de détection.