У меня есть мой HTML

<div class="comment-details">Hello @samplename This is my comment</div>
...
...
More .comment-details elements

При загрузке страницы я хотел найти этот @samplename внутри класса .comment-details с помощью цикла .each() и вставить его в тег <a href="samplelink"></a> в jQuery или Javascript

Я хотел что-то вроде этого после загрузки страницы:

<div class="comment-details">Hello <a href="samplelink">@samplename</a> This is my comment</div>
1
Mark Salvania 13 Сен 2018 в 21:03

2 ответа

Лучший ответ

Реализация jQuery:

$('.comment-details').each(function(){
    $(this).html($(this).html().replace(/\@.+?\b/g, `<a href=profile/${$(this).html().match(/\@.+?\b/g)[0].replace('@','')}>${$(this).html().match(/\@.+?\b/g)}</a>`));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-details">Hello @samplename This is my comment</div>
<div class="comment-details">Hello @JG This is my comment</div>

enter image description here

2
95faf8e76605e973 13 Сен 2018 в 20:02

В необработанном JS вы можете сделать

[...document.querySelectorAll('.comment-details')]
.forEach(tag => {
  tag.innerHTML = tag.innerHTML
    .replace(/\s?@(\w+)\s?/g, ' <a href="https://twitter.com/$1">@$1</a> ')
})
<div class="comment-details">Wow @m0meni great answer</div>
<div class="comment-details">@m0meni a little self-congratulatory though</div>

Объясняя каждый шаг:

  • querySelectorAll получает все блоки с деталями комментариев
  • [...] из-за Как лучше всего преобразовать NodeList в массив в Javascript?
  • затем вы используете функцию замены строки с регулярным выражением, чтобы делать то, что вы хотите
    • /\s?@(\w+)\s?/g захватывает все символы после @ и делает это только в том случае, если с обеих сторон есть пробел / ничего, т.е. hi @ potoato не будет соответствовать
    • $ 1 во втором аргументе использует совпадение из замены
1
m0meni 13 Сен 2018 в 20:03