evidenziare frammento di stringa

**supremo** · 25-04-2017, 03:10

salve raga, come fareste voi a evidenziare o impostare una regola css, per le ultime tre lettere restituite dalla funzione slice, un esempio di risposta sarebbe gradito

<spanid="frase">la giornata e troppo breve</span>
<scripttype="text/javascript">
frase = document.querySelector("#frase").innerHTML // la giornata e troppo breve
frase.slice(-3)//eve

</script>
ho provato inultimente a farlo nel seguente modo

frase.slice(-3).style.backgroundColor="yellow" // "Cannot set property 'backgroundColor' of undefined"

**KillerWorm** · 25-04-2017, 03:54

Ciao, innerHTML ti restituisce una stringa; ma tu non puoi applicare uno stile, o quello che è, ad una stringa in quel modo. Dovrai piuttosto applicarlo ad un reale elemento del DOM, ad esempio uno <span>. In tal caso dovrai aggiungerlo andando a ricostruire opportunamente il contenuto da passare, ad esempio, alla stessa proprietà innerHTML.

Una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="frase">la giornata e troppo breve</div>
  </body>
  <script type="text/javascript">
    var elemento = document.querySelector("#frase");
    var frase = elemento.innerHTML;
    elemento.innerHTML = frase.slice(0,-3)+"<span style='background:yellow;'>"+frase.slice(-3)+"</span>";
  </script>
</html>

Chiaramente si può fare in svariati altri modi.

Fai attenzione però che innerHTML ti restituisce il codice sorgente, in forma testuale, che è contenuto in tale elemento; per cui potrebbe capitare di avere degli altri tag al suo interno, e non solo del testo; in tal caso questo metodo potrebbe fallire restituendo magari dei tag troncati e sfasciando quindi il markup con risultati imprevedibili.

Chiaro che in questo semplice esempio c'è solo del testo e il tutto funziona come ci si aspetta.

PS: occhio a come posti il codice sul forum, il moderatore di turno non ci metterà molto a bastonarti. Vedi come postare il codice sul regolamento di sezione (discussione in evidenza).

**supremo** · 25-04-2017, 17:02

grazie mille, ora se converto in array la stringa, come faccio a evidenziare ata di giornata e eve di breve stando al indice 2 e al ultimo

codice:

    <div id="frase">la giornata e troppo breve</div>
  </body>
  <script type="text/javascript">
    var elemento = document.querySelector("#frase");
    var frase = elemento.innerHTML;
    var dividiFrase = frase.split(/\s/) // ["la", "giornata", "e", "troppo", "breve"]
    elemento.innerHTML = frase.slice(0,-3)+"<span style='background:yellow;'>"+frase.slice(-3)+"</span>";
    elemento.innerHTML = frase"<span style='background:yellow'>"+dividiFrase[1].slice(-3)+"</span>"
  </script>

**KillerWorm** · 25-04-2017, 20:51

Dovrai iterare gli elementi dell'array e ricostruire in qualche modo il testo da passare ad innerHTML. Oppure utilizzare replace con un'espressione regolare che inserisca in qualche modo degli span per racchiudere quei frammenti di testo.
Ma, dalle indicazioni che hai dato, la cosa non è molto chiara. Il problema è capire quali criteri devi utilizzare per selezionare solo quelle parti di testo.

PS: sull'esempio che ho riportato nel precedente post, ho erroneamente messo lo <script> dopo la chiusura del <body>. Questo rende il codice non valido, anche se su alcuni browser viene comunque interpretato. Sarebbe più corretto metterlo dentro il <body>, prima della chiusura.

PPS: ripeto, ti consiglio di leggere il regolamento di sezione dove è indicato di utilizzare gli opportuni tag di formattazione per postare del codice sul forum.

**badaze** · 25-04-2017, 21:52

Prova questo :

codice:

<div id="frase">la giornata e troppo breve</div>
<script>
var elemento       = document.querySelector("#frase");
var frase          = elemento.innerHTML;
elemento.innerHTML = frase.replace(/(\w{1,})(\w{3})/g, "$1<span style='background:yellow'>$2</span>"); 
//alert(elemento.innerHTML );
</script>

**supremo** · 26-04-2017, 00:25

vorrei selezionare giornata e breve e trasformarlo in grassetto con strong

codice HTML:

<div id="frase">la giornata e troppo breve</div>

<script type="text/javascript">
var elemento = document.querySelector("#frase"); 
var frase = elemento.innerHTML; //
var dividiFrase = frase.split(/\s/) //  ["la", "giornata", "e", "troppo", "breve"]

for(x=0; x<dividiFrase.length; x++){
// qui itera su tutti gli elementi, quando passa per giornata dovrebbe racchiuderlo dentro un elemento <strong>, la stessa cosa vale per giornata

if(dividiFrase[x]== dividiFrase[1]){
                elemento.innerHTML = dividiFrase[1]+"<strong>"+ dividiFrase[1]+"</strong>";
            }

            if(dividiFrase[x]== dividiFrase[3]){
                elemento.innerHTML = dividiFrase[3]+"<strong>"+ dividiFrase[3]+"</strong>";
            }}

la seconda condizionale, sovrascrive il testo della prima, ricevo eve, in teoria dovrei avere il seguente risultato

la <strong>giornata</strong> e troppo <strong>breve</strong>

**ciro78** · 26-04-2017, 09:19

Ciao Supremo,
bevenuto sul forum.

Leggi con attenzione il regolamento e soprattutto usa il tag code per inserire porzioni di codice nel messaggio.

**KillerWorm** · 26-04-2017, 15:51

la seconda condizionale, sovrascrive il testo della prima, ricevo eve,

Dal tuo esempio non vedo questo risultato.

vorrei selezionare giornata e breve e trasformarlo in grassetto con strong

Ad ogni modo, se il tuo intento è quello di selezionare le voci 1 e 4 di quell'array, puoi basarti direttamente sull'indice delle voci (variabile x del tuo ciclo) e verificare la corrispondenza direttamente in un'unica condizione. Questo in linea di massima.

Personalmente, per semplificare, utilizzerei il metodo map() in questo modo:

codice:

var elemento = document.querySelector('#frase');
elemento.innerHTML = elemento.innerHTML.split(/\s/).map(function(val, id, arr){
  return (id == 1 || id == 4) ? '<strong>'+val+'</strong>' : val;
}).join(' ');

Chiaramente, come sempre, lo si può fare in vari altri modi.

**supremo** · 26-04-2017, 16:24

scusa mah non avevi detto che dovevo ciclare sull'array, comunque non ho capito a cosa serve il metodo map, ne ho sentito parlare mah non lo mai usato, non ho capito perche il metodo join a un parametro vuoto, riguardo al risultato non usciva eve usciva l'ultima parola cioe giornata,giornata quello che voglio e mantenere tutta la frase " la giornata e troppo breve", non ho dimestichezza con gli operatori ternari ne quello logici

**KillerWorm** · 26-04-2017, 16:42

scusa mah non avevi detto che dovevo ciclare sull'array, comunque non ho capito a cosa serve il metodo map, ne ho sentito parlare mah non lo mai usato,

Serve, appunto, a ciclare le voci dell'array.

non ho capito perche il metodo join a un parametro vuoto

Non ha un parametro vuoto ma è una stringa formata da un singolo spazio (usato come separatore per riassemblare la stringa). Infatti prima hai splittato la stringa secondo il separatore "\s" (che in sostanza è uno spazio) ora dovrai riconnettere le varie voci dell'array per formare nuovamente una stringa. Ovviamente le parole (che non sono altro che le voci dell'array) dovranno essere unite usando, come separatore, uno spazio.

riguardo al risultato non usciva eve usciva l'ultima parola cioe giornata,giornata

Infatti.

quello che voglio e mantenere tutta la frase " la giornata e troppo breve"

E' quello che fa il mio ultimo esempio.

non ho dimestichezza con gli operatori ternari ne quello logici

Bene, allora è la giusta occasione per imparare ad usarli

Discussione: evidenziare frammento di stringa

Strumenti discussione

Ricerca discussione

Visualizza

evidenziare frammento di stringa

Tag per questa discussione

Permessi di invio