getSelection e surroundContents su più tag

Ho uno script che cambia 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 che viene emesso è:

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

Credo che questo abbia a che fare con la funzione getRange () anche se non sono sicuro di come procedere visto che sono un principiante in javascript.

C’è un altro modo in cui posso replicare ciò che sto cercando di ottenere?

    Grazie molto.

    Questa domanda è stata posta oggi: come posso evidenziare il testo dell’object DOM Range?

    Ecco la mia risposta:

    Il seguente dovrebbe fare quello che vuoi. Nei browser non-IE triggers modeMode, applica un colore di sfondo e quindi distriggers nuovamente designMode.

    AGGIORNARE

    Risolto il problema di 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); } } 

    Bene, penso che l’uso della libreria mark.js sia ottimo in questo caso. L’intenzione della libreria è quella di evidenziare tutte le istanze di una determinata parola nel documento HTML, ma può essere ottimizzata attraverso la funzione di filtro e gli attributi di span aggiuntivi possono essere aggiunti attraverso ciascuna funzione di opzione.

     function markFunc(node, text, color) { var instance = new Mark(node); instance.mark(text, { "element": "span", "className": color, "acrossElements": true, "separateWordSearch": false, "accuracy": "partially", "diacritics": true, "ignoreJoiners": true, "each": function(element) { element.setAttribute("id", "sohayb"); element.setAttribute("title", "sohayb_title"); }, "done":function(totalMarks) { window.getSelection().empty();//This only in Chrome console.log("total marks: " + totalMarks); }, "filter": function(node, term, totalCounter, counter) { var res = false; if (counter == 0) { res = selectionRange.isPointInRange(node, selectionRange.startOffset); } else { res = selectionRange.isPointInRange(node, 1); } console.log("Counter: " + counter + ", startOffset: " + selectionRange.startOffset); return res; } }); }; 

    Controlla questo esempio di JSFiddle per il codice completato che evidenzia la selezione dell’utente, anche su più elementi HTML.