getSelection & surroundContents en varias etiquetas

Tengo un script que cambia el color de fondo del texto que se ha seleccionado. Sin embargo, estoy teniendo un problema cuando el texto se selecciona en múltiples elementos/etiquetas.getSelection & surroundContents en varias etiquetas

El código que lo que tengo es:

var text = window.getSelection().getRangeAt(0); 
var colour = document.createElement("hlight"); 
colour.style.backgroundColor = "Yellow"; 
text.surroundContents(colour);

Y el de error que sale es:

Error: The boundary-points of a range does not meet specific requirements. = 
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR 
Line: 7

Creo que esto tiene que ver con la función GetRange() aunque estoy no estoy muy seguro de cómo proceder ya que soy un principiante en javascript.

¿Hay alguna otra forma en que pueda replicar lo que estoy tratando de lograr?

Muchas gracias.

Fuente

2010-04-06 lethalbody

Duplicado de http://stackoverflow.com/questions/2582831/highlight-the-text-of-the-dom-range-element y http://stackoverflow.com/questions/1622629/javascript-highlight-selected -range-button –

Esta pregunta se ha hecho hoy: How can I highlight the text of the DOM Range object?

Aquí es mi respuesta:

Lo que sigue 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.

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

Fuente

2010-04-06 11:18:59

Muchas gracias Tim, funcionó perfectamente y se disculpa por la duplicación. El otro hilo no apareció en mis búsquedas. – lethalbody

, pero ¿cómo se llama a la función * resaltar *? – yalematta

@LayaleMatta: Ejemplo: 'highlight (" # ff0000 ")' agregará un fondo rojo al texto seleccionado actualmente. –

Bueno, creo que el uso de la biblioteca mark.js es grande en este caso. La intención de la biblioteca es resaltar todas las instancias de una palabra determinada en el documento HTML, pero puede modificarse mediante la función de opción del filtro, y se pueden agregar atributos de extensión adicionales a través de la función de opción cada.

Marque esta JSFiddle sample de código completo que destaca la selección de usuario, incluso a través de múltiples elementos HTML.

Fuente

2017-02-08 07:01:40

getSelection & surroundContents en varias etiquetas

Respuesta

Cuestiones relacionadas