动态添加< wbr>在标点符号之前标记 [英] Dynamically add <wbr> tag before punctuation

问题描述

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

I'm trying to figure out how to add a <wbr> tag before punctuation in an email address, dynamically using jQuery.

我想必须有一种方法来扫描字符串中的。或@签名并将此标记放在它之前，但我无法弄明白。

I imagine there must be a way to scan the string for a "." or "@" sign and place this tag right before it, but I haven't been able to figure it out.

我尝试过两种不同的方法只有在搜索解决方案后才能提出的解决方案：

I've attempted two different methods which were the only solutions I was able to come up with after searching for solutions:

HTML：

<div class="container">
  <span class="some-special-classname">
    [e-mail]
  </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 :(第1次尝试）

$( ".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;
}

推荐答案

可以使用 html（函数（index，oldhtml）解析和更新现有内容

Can use html(function(index, oldhtml) to parse and update existing content

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

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

This will also loop over a collection and treat them as instance specific if there are more than one matching elements in selector

参考： html（fn）docs

这篇关于动态添加< wbr>在标点符号之前标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！