Можете ли вы обернуть текст символом @?

Question

Есть ли способ обернуть текст перед или после символа @ на адрес электронной почты? HTML или CSS, или, возможно, js/jQuery - все возможности для решения.

Я пытаюсь привести в порядок страницу администратора веб-сайта и уменьшить ширину некоторых столбцов без потери визуальных данных, и это главный кандидат!

Answer 1

Вы можете добавить ярлык inline span на символ.

$("p").html($("p").text().replace('@', '<span class="after">@</span>')); 

Fiddle: http://jsfiddle.net/21jqbtv9/5/

Если вы хотите что до или после определенного символа, вы должны использовать lookahead и lookbehinds соответственно.

lookbehind:./(? < = @) +/

lookahead: /.+(?=@)/

Изменить первый аргумент функции replace() к одному из выше регулярного выражения. Вот еще один пример с скрипкой

$(document).ready(function() { 
    var email = $("p").html(); 
    var emailParts = email.split('@'); 
    var beforeText = emailParts[0]; 
    var afterText = emailParts[2]; 
    $("p").html($("p").html().replace(beforeText, "<span class='after'>" + beforeText + "</span>")); 
}); 

http://jsfiddle.net/jL5kL72q/

Для части после @ символа, просто измените beforeText на afterText.

Answer 2

Другой вариант заключается в использовании HTML закодирован ​

Согласно this answer это приведет к тому же результату, что и <wbr> тег, который я был собирается предложить (пока j08691 не указал, не работает в IE) ,

Таким образом, вы могли бы иметь адрес электронной почты, как что-то вроде ...

email​@example.com 

Вот пример персонажа в действии, что вы можете запустить через сниппет ...

<div> 
 
quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog&#x200b;quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog 
 
</div>