Question

我正在使用基于this演示的jquery文本动画。

我首先必须将我所有的字母都包裹在span内。使用此代码可以正常工作，但是我的标点符号（“。”，“，”，“-”）...和特殊字符（@）被跳过了，因为我也需要将它们包装在span中。

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

有人可以用正则表达式代码帮助我吗？

Here是一个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

此正则表达式应该为您工作：

/[-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>

如何在跨度内包装字母，包括标点符号和特殊字符？

1 个答案: