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

andreto

Utente Attivo
5 Dic 2012
88
0
0
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

1.jpg

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

2.jpg

Ho provato vari script per la sostituzione del testo selezionato, però il tag (in questo caso <mark>) 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?
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
11 Mag 2013
409
0
0
certo, manca il bind che richiami la funzione xD

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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
5 Dic 2012
88
0
0
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 <br/> 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 <span>

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:
 

Fez Vrasta

Utente Attivo
11 Mag 2013
409
0
0
Credo che la cosa migliore sarebbe wrappare ogni singola lettera in uno <span> ed applicare la classe che rende la lettera colorata alle lettere selezionate.

In questo modo si può gestire tutto molto semplicemente
 

andreto

Utente Attivo
5 Dic 2012
88
0
0
Credo che la cosa migliore sarebbe wrappare ogni singola lettera in uno <span> 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

Utente Attivo
11 Mag 2013
409
0
0
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

Utente Attivo
5 Dic 2012
88
0
0
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 <br />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? :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Aggiungere Parole PHP 1
A aggiungere stringa all'inizio di ogni riga di un file txt PHP 3
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Aggiungere blocco dati Javascript 6
F [PHP] Aggiungere ruolo per accedere alle pagine PHP 2
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
S aggiungere colonna date in una tabella già esistente Database 0
P [PHP] Aggiungere un mio script a prestashop? PHP 10
Shyson [PHP] Aggiungere link al codice PHP 0
D Aggiungere file .css esterno su Android HTML e CSS 4
R [PHP] Aggiungere 90 minuti a stringa orario PHP 1
brasoft2019 [PHP] aggiungere timestamp in tabella correlata PHP 0
P [PHP] Aggiungere giorni e stampare risultato da data inserita in input PHP 3
L [Java] Aggiungere elementi ad array JSON Java 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
C [PHP] Aggiungere pulsante paypal PHP 2
M [javascript] Aggiungere eventi al caricamento Javascript 0
M aggiungere streaming audio a pagina html HTML e CSS 2
trattorino [PHP] sql aggiungere dato in una tabella senza cancellare contenuto PHP 6
Francesco Oliviero Aggiungere comando a pulsante HTML HTML e CSS 1
felino [WordPress] [WooCommerce] Ordine: aggiungere nuovi stati con notifica email al cliente WordPress 4
L [Photoshop] Aggiungere file video in timeline Photoshop 1
D [Photoshop] aggiungere piu tracce a immagine Photoshop 4
D Aggiungere slash finale ad URL con .htaccess Web Server 2
G [Javascript] aggiungere sub-namespace Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
felino [WordPress] [Woocommerce] Aggiungere un costo addizionale per prodotto WordPress 0
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
elpirata Aggiungere un disco ssd separato dal raid 1 Hardware 0
S (VENDO) Possiamo aggiungere fino a 20000 Membri nei Gruppi Facebook Italiani Annunci servizi di Social Media Marketing 2
trattorino [PHP] aggiungere html in un codice PHP 0
otto9due Aggiungere n. giorni ad una data nel datepiker jQuery 4
R [HTML] Aggiungere una tabella a fianco di altre tabelle... HTML e CSS 6
F aggiungere codice dopo n elementi jquery jQuery 1
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
asevenx [Javascript] aggiungere dinamicamente un campo di un form Javascript 3
ACarty [Javascript] Aggiungere link alle foto. Javascript 19
matteoraggi Aggiungere filtri a woocommerce WordPress 0
S appinventor, aggiungere tasto registrazione Sviluppo app per Android 1
V Aggiungere un img nel background Sviluppo app per Android 1
felino Capability: aggiungere cap all'editor per admin.php?page WordPress 0
E problema per aggiungere un database mdf da visual studio .NET Framework 9
M Aggiungere input text dopo aver selezionato un campo da una select option Presentati al Forum 0
M aggiungere dei div non sostituirli Javascript 1
P Aggiungere campo input da una select jQuery 1
U Aggiungere immagini in una cartella ASP.NET 1

Discussioni simili