3

He visto esta pregunta en ingles Javascript - add a span for each letter y siguiendo los comentarios he logrado que mis palabras se agreguen perfectamente a etiquetas <span> a las cuales les agrego una animación de Entrada y Salida.

Lo que pasa es que mi carácter coma (,) no lo reconoce como letra y por lo tanto esta animación que tienen los <span> no la incluye y la animación no se ve bien. animación

En consola me muestra como texto. console

Lo que he intentado:

Quise agregar el Unicode de la coma (,) que es -002C dentro del rango de caracteres permitidos, pero ni aun así me la reconoce.

código original: JS:

        $('.index-copy .letter-row-1, .index-copy .letter-row-2').each(function(){
            $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
        }); 

HTML:

<div class="index-copy">
    <h2 class="letter-row-1" style="font-size: 40px!important">NO ABANDONES LO QUE TE HACE ÚNICO,</h2>
    <h2 class="letter-row-2" style="font-size: 40px!important">REFUERZA TU MARCA</h2>*texto en itálica*
</div>

código con unicode de la coma (,) agregado:

        $('.index-copy .letter-row-1, .index-copy .letter-row-2').each(function(){
            $(this).html($(this).text().replace(/([^\x00-\x80-\002]|\w)/g, "<span class='letter'>$&</span>"));
        }); 

Cualquier comentario sobre como lograr solucionar esto lo agradeceria.

2 respuestas 2

1

No necesitas una expresión regular para separar por <span> cada letra del elemento, para ello, te propongo que uses String.prototype.split, el cual te separa el string por partes, de manera que podemos separar el string y obtener un array de cada letra de él, array el cual vamos a recorrer con Array.prototype.forEach

$(".index-copy > h2").each(i => {
  const el = $(".index-copy > h2")[i];
  const split = $(el).text().split("");
  $(el).html("");
  split.forEach(w => {
    el.innerHTML += `<span class="letter" style="transform: scale(0.25) rotateZ(0deg);">${w}</span>`;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="index-copy">
    <h2 class="letter-row-1" style="font-size: 40px!important">NO ABANDONES LO QUE TE HACE ÚNICO,</h2>
    <h2 class="letter-row-2" style="font-size: 40px!important">REFUERZA TU MARCA</h2>
</div>

2
  • 1
    Si bien la idea esta bien, es mas eficiente hacer $(el).html(valor); una sola vez. De lo contrario estas obligando al navegador a hacer el re-calculo de layout, repainting y/o rendering cada vez que actualizas el DOM
    – Marcos
    Commented el 19 mar. 2021 a las 17:25
  • @anythingg muchas gracias por tu respuesta, voy a implementarlo en mi otra seccion de contactenos porque me parece muy buena idea.
    – Ragnar
    Commented el 19 mar. 2021 a las 17:31
0

En la RegEx:

[^\x00-\x80-\002]

No estas agregando la coma, sino que la estas excluyendo (mas info).

Solución 1:

Si lo que buscas es que todo caracter distinto de "vacio" sea agregado agregado dentro de un <span, podrías hacerlo así:

/[^\s]/g

Demo:

$('.index-copy .letter-row-1, .index-copy .letter-row-2').each(function() {
  $(this).html($(this).text().replace(/[^\s]/g, "<span class='letter'>$&</span>"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="index-copy">
  <h2 class="letter-row-1" style="font-size: 40px!important">NO ABANDONES LO QUE TE HACE ÚNICO,</h2>
  <h2 class="letter-row-2" style="font-size: 40px!important">REFUERZA TU MARCA</h2>
</div>


Solución 2:

Si quisieras mantener tu RegEx y solo agregar la coma, podrías hacerlo así:

/([^\x00-\x80]|\w|,)/g

Demo:

$('.index-copy .letter-row-1, .index-copy .letter-row-2').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w|,)/g, "<span class='letter'>$&</span>"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="index-copy">
  <h2 class="letter-row-1" style="font-size: 40px!important">NO ABANDONES LO QUE TE HACE ÚNICO,</h2>
  <h2 class="letter-row-2" style="font-size: 40px!important">REFUERZA TU MARCA</h2>
</div>

1
  • Muchas gracias por tu respuesta @Marcos, agregando /([^\x00-\x80]|\w|,)/g para incluir la coma me soluciona en mi caso porque estoy seguro de no agregar otro caracter.
    – Ragnar
    Commented el 19 mar. 2021 a las 17:29

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.