Come posso evidenziare il testo dell'oggetto DOM Range?

Question

Seleziono del testo sulla pagina html (aperto in firefox) usando il mouse, e usando le funzioni javascript, creo/ottengo l'oggetto-intervallo corrispondente al testo selezionato.

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

ora voglio evidenziare tutto il testo che rientra nel rangeobject.I sto facendo in questo modo,

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

Bene, questo funziona bene, solo quando il rangeobject (punto iniziale e finale) si trova nella stessa TextNode, allora evidenzia la corrispondente text.Ex

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

Ma se il rangeobject riguarda più TextNode, properlay allora non funziona, si evidenzia che solo i testi trovarsi nella prima 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> 

Qualsiasi idea di come posso fare, tutti i testi che rientra rangeobject, evidenziato, indipendentemente dal fatto gamma risiede in un singolo nodo o più nodi? Grazie ....

Answer 1

Suggerirei di utilizzare il metodo document o TextRangeexecCommand, che è stato creato per tale scopo, ma di solito viene utilizzato in documenti modificabili. Ecco la risposta che ho dato a una domanda simile:

Quanto segue dovrebbe fare quello che vuoi. Nei browser non-IE attiva modeMode, applica un colore di sfondo e quindi disattiva nuovamente designMode.

UPDATE

fisso a lavorare in IE 9.

UPDATE 12 Settembre 2013

Ecco un link in dettaglio un metodo per rimuovere punti salienti creati con questo metodo:

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

Potresti per favore elaborare la necessità di questa funzionalità. Se si desidera solo cambiare lo stile evidenziazione del testo selezionato è possibile utilizzare i CSS: ':: selezione'

Ulteriori informazioni: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

Potete provare ad aggiungere una classe per la durata circostante e applicare CSS gerarchico?

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

In definizione CSS,

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

io non l'ho provato. Ma immagino solo che funzionerebbe.

Answer 4

Rangy è una libreria di selezione e intervallo per browser che risolve perfettamente questo problema con il suo CSS Class Applier module.Lo sto usando per implementare l'evidenziazione su una gamma di browser desktop e su iPad e funziona perfettamente.

La risposta di Tim Down è ottima, ma Rangy ti risparmia di dover scrivere e mantenere da solo tutti i codici di rilevamento delle funzioni.