ciclo FOR in JQuery

[MarcoSpillino]

Scusate ma non capisco come mai in questo codice:

		var codice = $('.codex').text();
		var codiceFra = codice.split(" "); 
		for(var i=0;i<=codiceFra.length;i++) {	
			// $('#monitor').html('<code>' + codiceFra[0] + '</code>');
			$('#monitor').html('<code>' + codiceFra[i] + '</code>');
		};

se commento codiceFra[i] mi stampa sull'Html: <code>undefinited</code> mentre se non commento la riga sopra mi fa tutto giusto stampando sull'html il <code>valore corretto</code> ma senza ripetere la scritta tante volte per la lunghezza di codiceFra. Non capisco perché il For non fa il suo lavoro

[Floky]

Ciao, prova a togliere dal for <= e lascia solo <
Il fatto che non ti ripeta il valore per n volte è probabilmente dovuto al fatto che con html() sovrascrivi ogni volta il valore ad ogni ciclo del for. Dichiara al di fuori del for una variabile (es: text) e dentro al for scrivi text += codiceFra[i] e in fine scrivi $('#monitor').html('<code>' + text + '</code>');

[MarcoSpillino]

Grazie mille per la risposta. Ho cambiato lo script in base ai tuoi suggerimenti ed è venuto così:

        var codice = $('.codex').text();
        var codiceFra = codice.split(" "); 
        var text = " ";
        for(var i=0;i<codiceFra.length;i++) {    
            text += codiceFra[i];
            $('#monitor').html('<code>' + text + '</code>');
        };

lo scrivo, si sa mai abbia capito male io. Il risultato però una frase unica fra i due tag, mentre il mio scopo è di inserire fra ogni parola il tag <code>. Per questo ho inserito lo .split(). Inoltre ho notato che ripete solamente l'ultima parola.

[Floky]

Il problema penso sia dovuto al tag code che è di tipo inline. Prova cosi:

text += '<code>' + codiceFra[i] + '</code><br>';

il tag br inizia una nuova riga a capo.

Strano che ripeta solo l'ultima parola. Ho provato con un esempio simile e funziona a me.

https://codepen.io/anon/pen/MVEXEE

Cosa c'è nella variabile codice?

[M4V1]

Se usi la funzione di jQuery .html() ogni volta il tag viene riscritto, se vuoi stamparli tutti usa .append()

Questo il codice in jQuery, ho sostituito il for con un each().

var codiceFra = $('.codex').text().split(" ");
$.each( codiceFra, function( key, value ) {
    $('#monitor').append('<code>' + value + '</code>');
});

Come dice giustamente Floky il tag code è di tipo inline, quindi il risultato viene tutto su una riga, ma se guardi il codice ogni parola è messa correttamente dentro il suo tag <code>

[MarcoSpillino]

Grazie a tutti e due per il vostro aiuto. Mi spiego meglio sul cosa vorrei fare, così chiunque ha un'idea più completa. Il mio intento è prendere il testo fra un div con class testo, in modo da colorare alcune parole. Ad esempio io scrivo in HTML un testo semplice:

<div class="testo">Ciao Sonia!</div>
<div class="testo">Sei la benvenuta</div>

e voglio che la parola Ciao e Benvenuta siano rispettivamente verde e rossa. Così la prima cosa che ho pensato è quella di dividere ogni parla e con uno <span> (cosa che non posso fare se sono lunghi testi).

<div class="testo"><span class="green">Ciao </span><span>Sonia!</div>
<div class="testo"><span>Sei </span><span>la </span><span class="red"> benvenuta</span></div>

per questo passaggio ho inserito un: $("span:contains('ciao')").addClass('green'); Il problema è mettere ad ogni parola una classe span e far andare a capo nei posti giusti.
Ho provato con gli script di Floxy, ma sostituendo la variabile sentence con la scritta nel div #sentence, lo script non funziona più.

[M4V1]

Ahh ok vuoi fare l'highlight di una parola, allora prova così:

var word = "parola";
$( "div.testo:contains(" + word + ")").html( function() {
    return $(this).html().replace( new RegExp(word, 'g'), "<span style=\"color:red;\">" + word + "</span>");
});

Questo ti ricerca la parola che metti nella variabile word e ci applica un colore.

[Floky]

Giusta la soluzione di M4V1. Eventualmente potresti aggiungere degli array con le parole che vuoi evidenziare tipo:

const greenWord = ["Sonia", ecc.. ];
const redWord = ["benvenuta" ecc...] e poi qualcosa come:

https://codepen.io/anon/pen/MVEXEE

[MarcoSpillino]

Grazie mille ad entrambi. Il vostro aiuto è stato determinante!