CODEWITHSUNDEEP
javascriptjqueryregexspecial-characterspunctuation
mmdwc
mmdwc

Reputation: 1137

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

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 [email protected] 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>

Upvotes: 1

Views: 483

Answers (1)

Scath
Scath

Reputation: 3824

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 [email protected] 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>

Upvotes: 1

Related Questions