errore split jquery con stringa

**luca9** · 05-12-2014, 16:33

Ciao,

ho un problemino con jquery.
In un div ho questa stringa di dati

codice HTML:

<div class="prova">
antonio: dato<br>
pasquale: dato2<br>
giovanni: dato3<br>
</div>

Con jquery vorrei assegnare un elemento e classe (es: <span class="nome">) a antonio, pasquale e giovanni identificando il campo attraverso i : presenti.

Ho fatto cosi ma non funziona:

codice:

$(function() {   
   
    
    $('.prova').each(function() {

        var words = $(this).text().split(':');

    $(this).empty().html(function() {

        for (i = 0; i < words.length; i++) {

               $(this).append(' <span>' + words[i] + '</span>');
            
        }

    });

});
    
});

Dove ho sbagliato??

**cavicchiandrea** · 05-12-2014, 17:57

A) html() non mi risulta abbia un callback (function)
B) words non credo per come è impostato sia un array

**luca9** · 05-12-2014, 18:39

L'ho testato su jsfiddle ma cosiì e sembra funzionare.

<div class="prova">
<h1>Lorem ipsum: dolor sit amet<br></h1>
<h1> Et ideo autem: ipsum dolor sit amet<br></h1>
</div>

$(function() {

$('h1').each(function() {

var words = $(this).text().split(':');

$(this).empty().html(function() {

for (i = 0; i < words.length; i++) {

$(this).append(' <span>' + words[i] + '</span>');

}

});

});

});

Come posso fare però la stessa cosa con il mio esempio all'inizio?

**KillerWorm** · 05-12-2014, 19:47

Ciao, nello specifico è possibile passare una funzione come argomento del metodo html() ma in tal caso sarebbe opportuno che restituisse una qualche stringa, altrimenti avrebbe poco senso.
La variabile words risulta essere un array ma, utilizzando : (due punti) come separatore, otterrai un array di 4 elementi, una cosa tipo ("antonio"; "dato pasquale"; "dato2 giovanni"; "dato3"). C'è qualcosa che non torna nella logica di funzionamento.

Io risolverei in modo più semplice con regex:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      .nome{
        color: Green;
        font-weight: bold;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        $('.prova').each(function() {
          var htmlstr = $(this).html();
          $(this).empty().html(htmlstr.replace(/(\w+):/gi,"<span class='nome'>$1</span>:"))
        });
      });
    </script>
  </head>
  <body>
    <div class="prova">
      antonio: dato<br>
      pasquale: dato2<br>
      giovanni: dato3<br>
    </div>
  </body>
</html>

**luca9** · 05-12-2014, 21:05

Perfetto funziona!

Ma ho visto che non funziona con 2 parole.

es:

<div class="prova">
antonio bianchi : dato<br>
pasquale rossi: dato2<br>
giovanni: dato3<br>
</div>

Come si può fare?

[/QUOTE]

**KillerWorm** · 05-12-2014, 21:40

Chiaro, ho seguito quanto hai indicato sul tuo primo post, né più né meno.

Dovresti giocare un po' sul pattern dell'espressione regolare, ma devi avere ben chiaro cosa vuoi che sia preso esattamente in considerazione.

EDIT:
intanto prova con questo:

codice:

/([\w ]+):/gi

**luca9** · 05-12-2014, 21:52

Si hai ragione,

mi era sfuggito questo particolare.
La mia idea in realtà è assegnare un elemento html alle stringhe prima e dopo del ':' dividendo in questo modo.
Non so se si può fare in realtà.

<div class="prova">
<span class="blocco1">antonio bianchi :</span> <span class="blocco2"> dato</span><br>
<span class="blocco1">pasquale rossi:</span> <span class="blocco2">dato2</span><br>
<span class="blocco1">giovanni:</span><span class="blocco2"> dato3</span><br>
</div>

C'è qualche soluzione per fare questo??

**KillerWorm** · 05-12-2014, 22:55

Vedi se può andar bene una cosa così:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      .blocco1{color: Green;}
      .blocco2{color: Red;}
    </style>
    <script type="text/javascript">
      $(function() {
        $('.prova').each(function() {
          var htmlstr = $(this).html();
          $(this).empty().html(htmlstr.replace(/([\w ]+):([\w ]+)/gi,"<span class='blocco1'>$1:</span><span class='blocco2'>$2</span>"))
        });
      });
    </script>
  </head>
  <body>
    <div class="prova">
      antonio bianchi : dato<br>
      pasquale rossi: dato2<br>
      giovanni: dato3<br>
    </div>
  </body>
</html>

**cavicchiandrea** · 05-12-2014, 22:57

Originariamente inviata da luca9

Si hai ragione,

mi era sfuggito questo particolare.

Poche idee ben confuse, ma sei in ottime mani killer è molto preparato (per tua fortuna)

**luca9** · 06-12-2014, 22:53

perfetto funziona.

Non vorrei essere pesante ma nel valore 'dato2' ho un % e quindi lo span inserito non va completamente.

Si può risolvere?

Comunque grazie mille anticipate!!

Discussione: errore split jquery con stringa

Strumenti discussione

Ricerca discussione

Visualizza

errore split jquery con stringa

Permessi di invio