Как на 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]

$('.text').html((i, html) => {
  const regex = /@(\w+)/g;
  const replacement = (m, g1) => `<a href="https:\/\/site.com/${g1}">${m}</a>`;

  return html.replace(regex, replacement);
});

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, Спасибо.