getSelection & surroundContents su più tag

Question

Ho uno script che modifica il colore di sfondo del testo che è stato selezionato. Tuttavia sto riscontrando un problema quando il testo è selezionato su più elementi/tag.

Il codice che ho è:

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

e l'errore di essere uscita è:

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

Credo che questo sia a che fare con la funzione getRange(), anche se io sono Non sono sicuro di come procedere visto che sono un principiante su javascript.

C'è qualche altro modo per replicare ciò che sto cercando di ottenere?

Molte grazie.

Answer 1

Questa domanda è stato chiesto oggi: How can I highlight the text of the DOM Range object?

Ecco la mia risposta:

Il seguente 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.

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); 
    } 
} 

Answer 2

Beh penso che l'uso di mark.js biblioteca è grande in questo caso. L'intenzione della libreria è quella di evidenziare tutte le occorrenze di una determinata parola nel documento HTML, ma può essere ottimizzata tramite la funzione di opzione del filtro e ulteriori attributi di span possono essere aggiunti tramite la funzione di opzione ogni.

Scegli questa JSFiddle sample per il codice compilato che mette in evidenza la selezione dell'utente, anche su più elementi HTML.