Originariamente inviato da cavicchiandrea
Il DOM mi è sempre stato "ostico" se non lo hai già fatto leggi
qui
Io fin'ora ho scritto questo che si occupa di evidenziare le parole o frasi della pagina con la sola selezione del mouse:
codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.evidenziato{
background-color: yellow;
}
</style>
<script type="text/javascript">
document.onmouseup=function(){evidenzia()};
function evidenzia () {
if (window.getSelection().isCollapsed == false) {
if (window.getSelection) {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var selection_clone = range.cloneContents();
selection.deleteFromDocument();
var nuovo_nodo = document.createElement("span");
nuovo_nodo.setAttribute("class","evidenziato");
nuovo_nodo.appendChild(selection_clone);
range.insertNode(nuovo_nodo);
}
else {
alert ("Il tuo browser non supporta questo!");
}
}
}
</script>
</head>
<body>
<div>Questo è un div</div>
<div>Questo è un div</div>
<span>Questo è uno span</span>
<span>Questo è uno span</span>
Questo è un paragrafo</p>
Questo è un paragrafo</p>
</body>
</html>
Se seleziono riga per riga, nessun problema!
Se seleziono insieme le due righe dello span anche se in mezzo c'è il tag
nessun problema!
Quando la selezione inizia o finisce in un div o paragrafo, incominciano i problemi.
Avrei pensato di trovare tutti i nodi di testo inclusi nella selezione ed applicare lo span ad ognuno di loro.
Ma purtroppo non conosco il metodo.
C'è qualche angelo che mi possa aiutare?