在标点符号前动态添加 标签

我正在尝试弄清楚如何添加<wbr>使用 jQuery 动态地在电子邮件地址中的标点符号之前添加标签。

我想一定有一种方法可以扫描字符串中的“.”。或“@”符号并将此标签放在它前面，但我一直无法弄清楚。

我尝试了两种不同的方法，这是我在搜索解决方案后能够提出的唯一解决方案：

HTML:

<div class="container">
  <span class="some-special-classname">
    [email protected] /cdn-cgi/l/email-protection
  </span>

  <br /> <br />
  <button class="test">Test Button</button>
</div>

CSS

wbr:after {
     content:"\00200B";
}

.container {
  margin: 0 auto;
  max-width: 400px;
  padding : 10px;
  border: 1px solid #bbb;
}

JavaScript：（第一次尝试）

$( ".test" ).click(function() {
  $('.some-special-classname').html().replace(/@/g,"<wbr>@");
  $('.some-special-classname').html().replace(/./g,"<wbr>.");
});

JavaScript：（第二次尝试）

var str = $('.some-special-classname').val();
str.replace(/@/g,'<wbr>@');

function myFunction() {
   var str = $('.some-special-classname').val();
   var n = str.indexOf(".");
   document.getElementById("demo").innerHTML = n;
}

Can use html(function(index, oldhtml)解析和更新现有内容

$('.some-special-classname').html(function(_, oldhtml){
      return oldhtml.replace(/([@.])/g,"<wbr>$1");
});

如果选择器中有多个匹配元素，这也会循环遍历集合并将它们视为特定于实例的元素

参考：html(fn) 文档 http://api.jquery.com/html/#html-function