How to wrap letters inside span including punctuation and special characters?

Question

I'm using a jquery text animation based on this demo.

I first have to wrap all my letters inside span. it works fine using this code, but my punctuation (".", ",", "-")... and special characters (@) are skipped as I also need to wrap them inside span.

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

Can anybody help me with the regex code?

Here is a JSFiddle.

 $('.ml10 .letters').each(function() { $(this).html($(this).text().replace(/([^\\x00-\\x80]|\\w)/g, "<span class='letter'>$&</span>")); }); anime.timeline({ loop: false }) .add({ targets: '.ml10 .letter', rotateY: [-90, 0], duration: 1300, delay: function(el, i) { return 45 * i; } }); 

 .ml10 { position: relative; font-weight: 900; font-size: 4em; } .ml10 .text-wrapper { position: relative; display: inline-block; padding-top: 0.2em; padding-right: 0.05em; padding-bottom: 0.1em; overflow: hidden; } .ml10 .letter { display: inline-block; line-height: 1em; transform-origin: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="ml10"> <span class="text-wrapper"> <span class="letters">His cognitis @Gallus ut ser&pens adpetitus telo vel saxo iamque spes extremas. Opperiens et succurrens saluti s!uae quavis ratione colligi omnes iussit; armatos et cum starent attoniti, districta dentium@acie.com stridens adeste inquit viri fortes mihi periclitanti vobiscum..</span> </span> </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> 

Answer 1

This Regex should work for you:

/[-A-Za-z0-9!$#%^&*@()_+|~=`{}\[\]:";'<>?,.\/]/g

JSFiddle Link

 $('.ml10 .letters').each(function() { $(this).html($(this).text().replace(/[-A-Za-z0-9!$#%^&*@()_+|~=`{}\\[\\]:";'<>?,.\\/]/g, "<span class='letter'>$&</span>")); }); anime.timeline({ loop: false }) .add({ targets: '.ml10 .letter', rotateY: [-90, 0], duration: 1300, delay: function(el, i) { return 45 * i; } }); 

 .ml10 { position: relative; font-weight: 900; font-size: 4em; } .ml10 .text-wrapper { position: relative; display: inline-block; padding-top: 0.2em; padding-right: 0.05em; padding-bottom: 0.1em; overflow: hidden; } .ml10 .letter { display: inline-block; line-height: 1em; transform-origin: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="ml10"> <span class="text-wrapper"> <span class="letters">@His cognitis Gallus@ ut serp#ens adpeti!tus te^lo vel saxo iamque spes extremas. Opperiens et succurrens saluti suae quavis ratione colligi omnes iussit; armatos et cum starent attoniti, districta dentium@acie.com stridens adeste inquit viri fortes mihi periclitanti vobiscum..</span> </span> </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>