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

【问题标题】：How to wrap letters inside span including punctuation and special characters?如何在跨度内包装字母，包括标点符号和特殊字符？
【发布时间】：2018-07-17 13:17:08
【问题描述】：

我正在使用基于 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>

【问题讨论】：

标签： javascript jquery regex special-characters punctuation

【解决方案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>

【讨论】：