Salve a tutti!

Sto realizzando una pagina web in cui ci sono varie caselle di testo (<span>) con annesso (all'interno di una struttura tabellare) un pulsante. Tramite la selezione di una parte di testo e la pressione del pulsante il testo verrà colorato di rosso.



Pel colorare il testo di rosso ho già trovato la soluzione aggiungendo, da js degli span con una classe css su l'innerHTML dello span principale tramite degli indici.

In sostanza per realizzarlo ho bisogno di una funzione che, selezionato un testo e cliccato sul pulsante, mi ritorni l'indice di inizio e di fine della selezione all'interno di tale testo, ad esempio:

Salve a tutti
Salve a tutti --> 2,8

per fare questo ho trovato la funzione window.getSelected(), ma esso genera dei problemi in quanto ritorna si ciò ke è stato selezionato, ma in tutto il testo:

1) se viene selezionato un testo e cliccato sul pulsante sbagliato, il testo viene evidenziato ugualmente (posso ovviare a questo problema racchiudendo i vari table in popup, non è un problema)

2) se viene selezionata una parola singola e ripetuta (ad esempio "la" o "che") verrà selezionata la prima occorrenza soltanto in quanto la funzione sopracitata ritorna solo del testo e la mia unica opsione per ricavare gli indici è indexOf(window.getSelected()) e indexOf(window.getSelected())+window.getSelected() .length: non ho modo di sapere se è stato selezionata la prima occorrenza o la seconda, ecc.

Potete suggerirmi una soluzione più ottimale o, quantomento, che risolva il problema?