Javascript 动态添加<；wbr>；标点符号前的标记

我试图弄清楚如何在电子邮件地址中的标点符号之前添加

标记，动态使用jQuery

我想一定有一种方法可以扫描字符串中的“.”或“@”符号，并将此标记放在它的正前方，但我一直无法找到它

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

HTML:

<div class="container">
  <span class="some-special-classname">
    verylongfirstname.verylonglastname@prettylongemailaddress.com
  </span>

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

Javascript：（第一次尝试）

$（“.test”）。单击（函数（）{
$（'.some special classname'）.html（）.replace（/@/g，“@”）；
$（'.some special classname'）.html（）.replace（//g，“.”）；
});

Javascript：（第二次尝试）

var str=$（'.some-special classname'）.val（）；
str.replace（/@/g，“@”）；
函数myFunction（）{
var str=$（'.some-special classname'）.val（）；
var n=str.indexOf（“.”）；
document.getElementById（“demo”）.innerHTML=n；
}

您几乎正确地进行了替换，但实际上没有编辑DOM

var $elem = $('.some-special-classname');
var formattedString = $elem.html().replace(/([@.])/g,"<wbr>$1");
$elem.html(formattedString); //this is what you are missing!

var$elem=$（'.some-special classname'）；
var formattedString=$elem.html（）.replace（/（[@.]）/g，“$1”）；
$elem.html（格式化字符串）//这就是你所缺少的！

还要注意正则表达式更改为

/（[@.]）/g

，因此不需要写两行单独的代码来替换。（感谢@DJDavid98的编辑）

可以使用

html（函数（索引，oldhtml）

解析和更新现有内容

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

$（'.some-special classname'）.html（函数（\ux，oldhtml）{
返回oldhtml.replace（/（[@.]）/g，“$1”）；
});

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

---

参考资料：

谢谢Arash！这很有效，但当我添加其他电子邮件地址时，它会将所有电子邮件地址设置为相同的地址。我将此作为“第一个解决方案”更新按钮。也感谢您编辑我的问题！我投票支持您的答案，因为它在技术上适用于我开始使用的HTML。谢谢！这太完美了！使用多个电子邮件地址对其进行了测试，并且在所有情况下都适用：

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;
}

var $elem = $('.some-special-classname');
var formattedString = $elem.html().replace(/([@.])/g,"<wbr>$1");
$elem.html(formattedString); //this is what you are missing!

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