Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 17
  1. #1
    Utente bannato
    Registrato dal
    Jan 2017
    residenza
    bergamo
    Messaggi
    94

    evidenziare frammento di stringa

    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"

    Ultima modifica di supremo; 25-04-2017 a 03:12

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente bannato
    Registrato dal
    Jan 2017
    residenza
    bergamo
    Messaggi
    94
    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>
    Ultima modifica di ciro78; 26-04-2017 a 09:19 Motivo: tag code

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,344
    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>
    Ridatemi i miei 1000 posts persi !!!!
    Non serve a nulla ottimizzare qualcosa che non funziona.
    Cerco il manuale dell'Olivetti LOGOS 80B - www.emmella.fr

  6. #6
    Utente bannato
    Registrato dal
    Jan 2017
    residenza
    bergamo
    Messaggi
    94
    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>

  7. #7
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,505
    Ciao Supremo,
    bevenuto sul forum.

    Leggi con attenzione il regolamento e soprattutto usa il tag code per inserire porzioni di codice nel messaggio.
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente bannato
    Registrato dal
    Jan 2017
    residenza
    bergamo
    Messaggi
    94
    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

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    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
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.