Evidenziare la pagina HTML

[andreto]

Ciao a tutti, vorrei trovare un metodo semplice e veloce per evidenziare il testo di un articolo nel mio sito in questo modo:

seleziono con il tasto sinistro del mouse il testo da evidenziare
appena rilascio il tasto sinistro del mouse
javascript dovrebbe aggiungermi un tag (da me impostato es. <span class="xxx">) prima della selezione
e un altro tag (sempre da me impostato es. </span>) dopo la selezione.

(questo tag ha una classe specificata poi nel foglio di stile per assegnare uno sfondo al testo di colore giallo e un grassetto)

.xxx{
background-color:yellow;
font-weight:bold;
}

Ovviamente se la parola/frase da evidenziare è presente anche in altri posti nella pagina, javascript deve mettere i tag solo a quella parola e non ad altre.

Es. Ieri sera ho letto un libro per due ore e poi sono andato a letto!

Se decido di evidenziare il primo "letto", il secondo non deve evidenziarsi.

Qualcuno sa spiegarmi come posso fare?

 

[alessandro1997]

Questo script jQuery fa proprio quello che ti serve: http://mir3z.github.io/jquery.texthighlighter/.

 

[andreto]

Grazie Alessandro, ho provato e in effetti fa proprio quello che volevo.

Dovrò solo modificarlo per avere più evidenziatori nella stessa pagina insieme alla possibilità di rimuovere tutte le selezioni o solo alcune.

Dovrò anche fare in modo che il file si salvi in automatico, così la volta successiva ritrovo la pagina evidenziata così come l'avevo lasciata.

Vorrei però chiederti una cosa, visto che di jQuery ne capisco ancora poco

mi piacerebbe capire il funzionamento, nel senso, jQuery come fa ad inserire i tag al posto giusto?
In base alla posizione o ad altro?
Che metodo usa?

 

[helpdesk]

Ciao, l'ottimo script indicato dal collega alessandro.
Fa riferimento ad una classe opportunamente richiamata
esternamente ovvero: textHighlighter.
Richiamando i vari metodi in essa contenuti esempio:

$('#sandbox').getHighlighter().setColor('#00ff00');

Agisce sulla sottolineatura settandone il colore nello stesso modo si attivano altre azioni
insite nella classe.

 

[andreto]

Ciao helpdesk,

la mia domanda non si riferiva direttamente allo script segnalato da alessandro.

Vorrei capire se esiste un metodo con javascript per sapere a che punto inserire i tag all'interno dell'html partendo dalla selezione.

C'entra qualcosa window.getSelection() ?