I have seen this question in English Javascript - add a span for each letter and following the comments I have achieved that my words are perfectly added to labels <span>
to which I add an Enter and Exit animation .
What happens is that my character comma (,) does not recognize it as a letter and therefore this animation that they have <span>
does not include it and the animation does not look good. animation
In console it shows me as text.
What I have tried:
I wanted to add the Unicode of the comma (,) which is -002C within the range of allowed characters, but it doesn't even recognize it.
original code: 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>
code with unicode comma (,) added:
$('.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>"));
});
Any feedback on how to fix this would be appreciated.
You don't need a regular expression to separate by
<span>
each letter of the element, for this, I propose that you useString.prototype.split
, which separates the string by parts, so that we can separate the string and obtain an array of each letter of it, array which let's go withArray.prototype.forEach
In the
RegEx
:You are not adding the comma, but you are excluding it ( more info ).
Solution 1:
If you want every character other than "empty" to be added inside a
<span
, you could do it like this:demonstration:
Solution 2:
If you wanted to keep your
RegEx
and just add the comma, you could do it like this:demonstration: