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

Je sélectionne du texte sur la page html(ouvert dans firefox) à l'aide de la souris,et à l'aide de fonctions javascript, j'ai créer/récupérer la rangeobject correspondant au texte sélectionné.

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

Maintenant, je tiens à souligner tout le texte qui est sous l'rangeobject.Je fais comme cela,

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

Bien,cela fonctionne très bien, seulement quand le rangeobject(point de départ et le point de terminaison) se trouve dans la même textnode,puis il met en évidence le texte correspondant.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, alors il n'est pas de travail properlay, Il met en évidence seulement les textes qui se trouvent 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>

Une idée de comment puis-je faire, tous les textes qui relève de la rangeobject,a mis en évidence,indépendamment de l'existence de gamme se trouve dans un seul nœud ou plusieurs nœud?
Merci....

source d'informationauteur ganapati

  1. 25

    Je conseille document's ou de la TextRange's execCommand méthode, qui est construit pour un tel but, mais il est habituellement utilisé en documents éditables. Voici la réponse que j'ai donné à une question similaire:

    Les éléments suivants doivent faire ce que vous voulez. Non-IE navigateurs, elle tourne sur designMode, applique une couleur de fond et passe ensuite designMode à nouveau.

    Mise à JOUR

    Fixe de travail dans IE 9.

    Mise à JOUR du 12 septembre 2013

    Voici un lien détaillant une méthode pour enlever les points saillants créée 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);
    }
}
  2. 4

    Longiligne est un cross-browser gamme et de sélection de la bibliothèque qui permet de résoudre ce problème parfaitement avec sa Classe CSS Applicateur de module. Je l'utilise pour mettre en œuvre mettant en lumière à travers une gamme de navigateurs de bureau et sur iPad et il fonctionne parfaitement.

    Tim de Down réponse est grand, mais Longiligne vous évite d'avoir à écrire et à maintenir tout ce que la fonctionnalité de détection de code vous-même.

  3. 1

    Pourriez-vous préciser le besoin de cette fonctionnalité. Si vous voulez seulement changer la mettre en évidence le style du texte sélectionné, vous pouvez utiliser les CSS: ':: "choix de

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

  4. 0

    Pouvez-vous essayer d'ajouter une classe à l'entourent durée et d'appliquer hiérarchique CSS?

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

    En CSS définition,

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

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