Comment envelopper / entourer le texte en surbrillance avec un élément

Question

Je veux envelopper un texte sélectionné dans un conteneur div avec span, est-ce possible ?

Un utilisateur sélectionnera un texte et cliquera sur un bouton. Lors d'un événement de clic sur le bouton, je souhaite envelopper le texte sélectionné avec l'élément span. Je peux obtenir le texte sélectionné en utilisant window.getSelection() mais comment connaître sa position exacte dans la structure DOM ?

Answer 1

 function wrapSelectedText() {       
    var selection= window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span= document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    selection.insertNode(span);
}

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus  gravida magna, quis interdum magna mattis quis. Fusce tempor sagittis  varius. Nunc at augue at erat suscipit bibendum id nec enim. Sed eu odio  quis turpis hendrerit sagittis id sit amet justo. Cras ac urna purus,  non rutrum nunc. Aenean nec vulputate ante. Morbi scelerisque sagittis  hendrerit. Pellentesque habitant morbi tristique senectus et netus et  malesuada fames ac turpis egestas. Nulla tristique ligula fermentum  tortor semper at consectetur erat aliquam. Sed gravida consectetur  sollicitudin. 

<input type="button" onclick="wrapSelectedText();" value="Highlight" />

JS Violon .

Answer 2

c'est possible. Vous devez utiliser l'API range et la méthode Range.surroundContents(). Il place le nœud dans lequel le contenu est encapsulé au début de la plage spécifiée. voir https://developer.mozilla.org/en/DOM/range.surroundContents

Answer 3

surroundContents ne fonctionne que si votre sélection ne contient que du texte et pas de code HTML. Voici une solution plus flexible et multi-navigateur. Cela insérera un span comme celui-ci :

 <span id="new_selection_span"><!--MARK--></span>

L'étendue est insérée avant la sélection, devant la balise HTML d'ouverture la plus proche.

 var span = document.createElement("span");
span.id = "new_selection_span";
span.innerHTML = '<!--MARK-->';

if (window.getSelection) { //compliant browsers
    //obtain the selection
    sel = window.getSelection();
    if (sel.rangeCount) {
        //clone the Range object
        var range = sel.getRangeAt(0).cloneRange();
        //get the node at the start of the range
        var node = range.startContainer;
        //find the first parent that is a real HTML tag and not a text node
        while (node.nodeType != 1) node = node.parentNode;
        //place the marker before the node
        node.parentNode.insertBefore(span, node);
        //restore the selection
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else { //IE8 and lower
    sel = document.selection.createRange();
    //place the marker before the node
    var node = sel.parentElement();
    node.parentNode.insertBefore(span, node);
    //restore the selection
    sel.select();
}