在标点符号前动态添加 <wbr> 标签答案

【问题标题】：Dynamically add <wbr> tag before punctuation在标点符号前动态添加 <wbr> 标签
【发布时间】：2015-08-05 14:02:05
【问题描述】：

我正在尝试弄清楚如何在电子邮件地址中的标点符号之前添加<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>

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

可以使用html(function(index, oldhtml)解析和更新现有内容

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

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

参考：html(fn) docs

【讨论】：

谢谢！太棒了！使用多个电子邮件地址对其进行了测试，它适用于所有实例：CodePen

【解决方案2】：

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

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

还要注意正则表达式更改为/([@.])/g，因此您无需编写 2 行单独的替换行。（感谢@DJDavid98 的编辑）

【讨论】：

谢谢阿拉什！这行得通，但是当我添加其他电子邮件地址时，它会将它们全部设置为相同的地址。我将CodePen 更新为我的“第一个解决方案”按钮。
也感谢您编辑我的问题！我对你的答案投了赞成票，因为考虑到我开始使用的 HTML，它在技术上是有效的。