Question

我看到并尝试了该代码，该代码仅将字母包裹在一个跨距中并且可以工作，但是我还想在跨度中包含符号，有人可以帮助我吗？我真的不知道如何添加符号！

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

.letter{
  background: #0084ff;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="ml2">Welcome to my Website!</div>

我确实得到了Welcome to my Website字符串，但其中不包含感叹号。

Answer 1

与其仅替换\w，不如替换包含\w的字符集，您可以在字符集中添加任何允许的符号：< / p>

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

.letter {
  border:1px solid green;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ml2">Welcome to my Website!</div>

Answer 2

您想包装所有不是空格的东西吗？

$('.ml2').each(function(){
   $(this).html($(this).text().replace(/[^ ]/g, "<span class='letter'>$&</span>"));
});

.letter{
  background: #0084ff;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="ml2">Welcome to my Website!</div>

如何在跨度中包装符号

2 个答案: