Как на jquery в тексте найти ники соцсетей @name и обернуть их ссылкой?

Question

[Cheizer]

Как в тексте на странице, найти все ники и обернуть их ссылкой? Они могут быть разные, такого типа: @nikname.

Например, есть текст:

<div class="text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне @username_1 . Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века @username_2. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, @username_3 используя Lorem Ipsum для распечатки образцов. </div>

А в результате получить такой вариант, ники обернуты ссылками с соответствующими адресами:

<div class="text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне <a href="https://site.ru/username_1">@username_1</a> . Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века <a href="https://site.ru/username_2">@username_2</a>. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, <a href="https://site.ru/username_3">@username_3</a> используя Lorem Ipsum для распечатки образцов. </div>

Answer 1

[Роман Сарваров]

Через регулярные выражения.
Дам подсказку: /^@\w+/

Answer 2

[0xD34F]

Чей текст надо модифицировать и как это будет сделано:

const selector = '.text';
const regex = /@(\w+)/g;
const replacement = '<a href="https://site.com/$1">$&</a>';
const replace = str => str.replace(regex, replacement);

Вот так всё просто получается:

$(selector).html(function() {
  return replace($(this).text());
});

// или

document.querySelectorAll(selector).forEach(n => {
  n.innerHTML = replace(n.innerText);
});

Comments

[Cheizer]

Благодарю! я пытался так сделать, а все ники обернуть не смог

$('.text:contains("@username_1")').html()
.replace('@username_1', '<a href="url">@username_1</a>');

[0xD34F]

Cheizer, правку вопроса примите.

[Cheizer]

0xD34F, Скажите пожалуйста как изменить это \w+ что бы и кириллические ники обернуть? Например @ник

[0xD34F]

Cheizer, я что-то непонятное сказал в предыдущем комментарии?

[Cheizer]

0xD34F, принял правку, не знал что в уведомлениях есть такое.

[0xD34F]

Cheizer, меняйте \w на \S.

[Cheizer]

0xD34F, Спасибо.