我正在尝试弄清楚如何在标点符号之前在电子邮件地址中添加<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 :(第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;
}
答案 0 :(得分: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进行编辑)
答案 1 :(得分:2)
可以使用html(function(index, oldhtml)
来解析和更新现有内容
$('.some-special-classname').html(function(_, oldhtml){
return oldhtml.replace(/([@.])/g,"<wbr>$1");
});
如果选择器中有多个匹配元素
,这也将循环一个集合并将它们视为特定于实例