0

Hola estoy tratando de separar un texto en varias palabras.Pero no logro colocar correctamente el span o div sobre cada una de las palabras He intentado esto:

$(function () {
  $("body").find("p").on("click", function (evento) { 
      let parrafo = $("body").find("p").text().trim(); 
      let espacio = (' ');
      var array = parrafo.split(espacio);
      
      console.log(array);

      $("body").find("p").each(array,function(i,e){
        array[i]= $('p').append("<span>"+ e +"</span>");
        
        });
     });
  });
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hola esto es un texto que quiero separar. Quiero añadir Span o divs en cada palabra</p>
</body>
</html>

1 respuesta 1

1

Se usó la instrucción for para recorrer cada letra de la oración dentro de la etiqueta de párrafo, el único detalle que tienes que contemplar es que al final de la oración que escribas, pongas un espacio ya que si no lo pones, la última palabra no te la va a tomar.

Si inspeccionas el código, te darás cuenta que a cada palabra le agrega las etiquetas span de apertura y cierre.

Pruébalo.

    $(document).ready(function(){
      
      var palabras = "<span>";
          var tamaño_palabra = $('p').html().length;
          var texto = $('p').html();
          var cadena_nueva ="";


          for(var i = 0; i < tamaño_palabra; i++){

              palabras += texto[i];

              if(texto[i] == " "){

                  palabras += "</span>";
                  cadena_nueva += palabras;
                  palabras = "<span>";
              }
          }

          $('p').html(cadena_nueva);
    
    });
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<p>Hola esto es un texto que quiero separar. Quiero añadir Span o divs en cada palabra </p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

3
  • me puedes explicar esto que hace exactamente ? palabras += "</span>"; cadena_nueva += palabras; palabras = "<span>"; Es que no termino de entenderlo. Porque primero la etiqueta de cierre? Commented el 4 feb. 2021 a las 20:20
  • 1
    @WinterIsBack OK, la palabras += "</span>"; se pone para cerrar la etiqueta <span> una vez que haya terminado la primer palabra encontrada, después la palabra que se guardó, se va almacenando en cadena_nueva += palabras; y finalmente la variable palabras = "<span>"; se vuelve a setear con la etiqueta de apertura span para meter la siguiente palabra, y así consecutivamente.
    – valle50
    Commented el 4 feb. 2021 a las 20:25
  • Muchas gracias!! :) ahora si lo entiendo!! Commented el 4 feb. 2021 a las 20:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.