¿Cómo puedo resaltar el texto del objeto Rango DOM?

Question

Selecciono un texto en la página html (abierta en firefox) usando el mouse, y usando las funciones de JavaScript, creo/obtengo el objeto de rango correspondiente al texto seleccionado.

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

ahora quiero resaltar todo el texto que depende del rangeobject.I estoy haciendo de esta manera,

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

Bueno, esto funciona bien, sólo cuando el rangeobject (punto inicial y punto final) se encuentra en la misma textNode, entonces se pone de relieve la text.Ex correspondiente

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

Pero si el rangeobject cubre más de un textNode, properlay entonces no está trabajando, él se destacan sólo los textos que estar en la primera 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> 

alguna idea de cómo puedo hacer, todos los textos que depende rangeobject, destacó, independientemente de si se encuentra en rango de un solo nodo o varios nodos? Gracias ....

Answer 1

se recomienda usar document 's o la TextRange' execCommand método s, que está construido para tal propósito, pero por lo general se utiliza en documentos editables. Aquí está la respuesta que di a una pregunta similar:

Lo siguiente debe hacer lo que quiera. En buscadores que no sean IE, activa DesignMode, aplica un color de fondo y luego desactiva de nuevo DesignMode.

ACTUALIZACIÓN

fijo para trabajar en IE 9.

Actualización 12 de septiembre de 2013

Aquí hay un enlace que detalla un método para eliminar destacados creados por este método:

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

Podría por favor explicar la necesidad de esta funcionalidad. Si sólo desea cambiar el estilo más destacado del texto seleccionado se puede utilizar CSS: ':: selección'

Más información: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

¿Se puede tratar de añadir una clase para el período que rodea y aplicar ¿CSS jerárquico?

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

En la definición CSS,

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

que no lo probamos. Pero solo adivinando que funcionaría.

Answer 4

Rangy es un rango de explorador cruzado y biblioteca de selección que resuelve este problema perfectamente con su CSS Class Applier module.Lo estoy usando para implementar el resaltado en una amplia gama de navegadores de escritorio y en iPad, y funciona perfectamente.

La respuesta de Tim Down es genial, pero Rangy le evita tener que escribir y mantener usted mismo todo el código de detección de funciones.