Как обернуть буквы внутри диапазона, включая знаки препинания и специальные символы?

Я использую текстовую анимацию jquery на основе этой демонстрации.

Сначала мне нужно обернуть все мои буквы внутри промежутка. он отлично работает с этим кодом, но мои знаки препинания ("".", ",", "-")... и специальные символы (@) пропускаются, так как мне также нужно обернуть их внутри диапазона.

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

Может ли кто-нибудь помочь мне с кодом регулярного выражения?

Вот 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>


javascript jquery regex special-characters punctuation
person mmdwc    schedule 17.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это регулярное выражение должно работать для вас:

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

Ссылка JSFiddle

$('.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>

person Scath    schedule 17.07.2018