Aggiungere tag nel DOM a parola/e selezionata/e nel output

andreto · 16 Mag 2013

Ciao a tutti, avrei la necessità di creare un semplice script (possibilmente senza utilizzare jQuery) che selezionando una lettera, una parola o più parole nel output di una mia pagina web

appena rilascio il tasto sinistro del mouse la lettera/parola/parole dovrebbero essere evidenziate in questo modo:

Ho provato vari script per la sostituzione del testo selezionato, però il tag (in questo caso ) me lo visualizzano sull'output in questo modo:

HTML:

<mark>Aggiungere tag alla parola</mark> o alle parole selezionete

Ho provato anche altri script che permettono l'aggiunta di tag del DOM però tutti gli script hanno bisogno di sapere dove aggrappare in qualche modo il tag, non potendolo sapere a priori non posso usare quel metodo.

Quale sistema o metodo posso usare per inserire il tag non nell'output ma nel DOM?

criric · 16 Mag 2013

Ciao, prova questo
è pieno di bug da risolvere ma potrebbe essere un inizio

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            span {
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            function evidenzia(){ 
        
                var div = document.getElementById('testo');
                var sel;
                var contenuto = div.innerHTML;
                // per firefox
                if ( window.getSelection ){
                    sel = window.getSelection();
                    // per explorer    
                } else if ( document.selection && document.selection.createRange ){
                    e = document.selection.createRange();
                    sel = e.text;
                } else{
                    return;
                }
        
                contenuto = contenuto.replace(sel,"<span>" + sel + "</span>");
                div.innerHTML = contenuto;
        
            }
        </script>
    </head>
    <body>
        <div id="testo" onmouseup="evidenzia()">
            Nel mezzo del cammin di nostra vita<br/>
            mi ritrovai per una selva oscura<br/>
            ché la diritta via era smarrita.<br/>
            Ahi quanto a dir qual era è cosa dura<br/>
            5esta selva selvaggia e aspra e forte<br/>
            che nel pensier rinova la paura!<br/>
        </div>
    </body>
</html>

se man mano posti le modifiche che gli fai potremmo finirlo insieme
apeena ho un po di tempo lo riguardo

Fez Vrasta · 16 Mag 2013

Vi ho sistemato lo script in un jsfiddle

http://jsfiddle.net/9rc96/

Così potete aggiornarlo e linkare la nuova versione man mano che lo sistemate. 0

andreto · 16 Mag 2013

Fez Vrasta ha scritto:
Vi ho sistemato lo script in un jsfiddle

http://jsfiddle.net/9rc96/

Così potete aggiornarlo e linkare la nuova versione man mano che lo sistemate. 0

Non evidenzia...

Fez Vrasta · 16 Mag 2013

certo, manca il bind che richiami la funzione xD

Io mi sono limitato a ricopiare quello che ti è stato passato.

criric · 16 Mag 2013

se copi e incolii in un file html quello che ti ho passato funziona
non so invece come funziona il sito dove Fez ja postato poi gli do un occhiata

andreto · 16 Mag 2013

criric ha scritto:
Ciao, prova questo
è pieno di bug da risolvere ma potrebbe essere un inizio...
...se man mano posti le modifiche che gli fai potremmo finirlo insieme
appena ho un po di tempo lo riguardo

1) Se nel testo seleziono la seconda parola "era" lui mi evidenzia la prima che trova partendo dall'inizio.
La stessa cosa vale per una singola lettera.

2) Se seleziono 2 righe (con tag in mezzo) non evidenzia nulla.
Il problema penso sia il tag, infatti se evidenzio ad esempio "cammin" e poi seleziono "del cammin di" lui non evidenzia nulla perchè in mezzo trova i tag 

Per adesso ho trovato questi problemi,
stasera da casa guarderò lo script con calma per vedere se riesco a fare qualcosa.

Ti farò sapere, comunque grazie :fonzie:

andreto · 16 Mag 2013

criric ha scritto:
non so invece come funziona il sito dove Fez ha postato

Infatti io intendevo questo,
purtroppo non so come funziona il sito però mi piacerebbe saperlo perchè sembra una cosa ben fatta

Fez Vrasta · 16 Mag 2013

Credo che la cosa migliore sarebbe wrappare ogni singola lettera in uno ed applicare la classe che rende la lettera colorata alle lettere selezionate.

In questo modo si può gestire tutto molto semplicemente

andreto · 16 Mag 2013

Fez Vrasta ha scritto:
certo, manca il bind che richiami la funzione xD

Non conosco il sito, cos'è il bind, come devo fare per testare lo script sul sito?

Fez Vrasta · 16 Mag 2013

ecco:
http://jsfiddle.net/9rc96/8/

andreto · 16 Mag 2013

Fez Vrasta ha scritto:
Credo che la cosa migliore sarebbe wrappare ogni singola lettera in uno ed applicare la classe che rende la lettera colorata alle lettere selezionate.

In questo modo si può gestire tutto molto semplicemente

In questo modo il DOM risulterebbe lunghissimo...

Fez Vrasta · 16 Mag 2013

andreto ha scritto:
In questo modo il DOM risulterebbe lunghissimo...

Non che te ne freghi più di tanto, e comunque funzionerebbe bene.

andreto · 16 Mag 2013

Fez Vrasta ha scritto:
ecco:
http://jsfiddle.net/9rc96/8/

Ottimo, puoi però spiegarmi cosa hai fatto per renderlo funzionante?

Fez Vrasta · 16 Mag 2013

Codice:

document.getElementById("testo").onmouseup=function(){evidenzia()};

in pratica JSfiddle non prende per buono l'attributo html "onmouseup", quindi ho creato un listener in javascript che faccia la stessa cosa.

andreto · 21 Mag 2013

criric ha scritto:
se man mano posti le modifiche che gli fai potremmo finirlo insieme

Io fin'ora ho scritto questo che si occupa di evidenziare le parole o frasi della pagina con la sola selezione del mouse:

HTML:

<!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><br />
<div>Questo è un div</div>
<br /><br /> 
<span>Questo è uno span</span>
<br /><br /> 
<span>Questo è uno span</span>
<br /><br /> 
<p>Questo è un paragrafo</p>
<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 con la classe ad ognuno di loro.

Ma purtroppo non conosco il metodo per ricavare i nodi di testo che fanno parte della selezione.

C'è qualche angelo che mi possa aiutare?

Cerca

Cerca

Aggiungere tag nel DOM a parola/e selezionata/e nel output

andreto

Utente Attivo

criric

Super Moderatore

Fez Vrasta

Utente Attivo

andreto

Utente Attivo

Fez Vrasta

Utente Attivo

criric

Super Moderatore

andreto

Utente Attivo

andreto

Utente Attivo

Fez Vrasta

Utente Attivo

andreto

Utente Attivo

Fez Vrasta

Utente Attivo

andreto

Utente Attivo

Fez Vrasta

Utente Attivo

andreto

Utente Attivo

Fez Vrasta

Utente Attivo

andreto

Utente Attivo

Discussioni simili