Найдите все @tagnames внутри элемента, затем вставьте в него ссылку

У меня есть мой 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
0
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В необработанном 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 получает все блоки с деталями комментариев
  • [...] из-за В Javascript, как лучше всего преобразовать NodeList в массив
  • затем вы используете функцию замены строки регулярным выражением, чтобы делать то, что вы хотите
    • /\s?@(\w+)\s?/g захватывает все символы после @ и делает это только в том случае, если с обеих сторон есть пробел / ничего, т.е. hi @ potoato не будет соответствовать
    • $ 1 во втором аргументе использует совпадение из замены

Работает на рабочем столе Windows, но не работает на сафари iphone :(

Mark Salvania 13.09.2018 21:37

@MarkSalvania, вероятно, из-за распространения Array, поскольку это единственная функция, которая теперь может работать в старых браузерах.

m0meni 13.09.2018 21:59

Понял. Большое спасибо!.

Mark Salvania 13.09.2018 22:00

@MarkSalvania Вместо этого вы могли бы сделать Array.prototype.slice.call(document.querySelectorAll('.comme‌​nt-details'), 0), если это не решит проблему ... тогда извините: '(

m0meni 13.09.2018 22:05
Ответ принят как подходящий

Реализация 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

Я хотел показать @currentname, когда он уже вставлен в тег <a>. Не всегда @samplename

Mark Salvania 13.09.2018 20:42

@MarkSalvania хорошее место, сэр Марк. вы можете использовать match отредактировал мой ответ

95faf8e76605e973 13.09.2018 20:47

Почти :) как обновить <a href="samplelink"> до <a href="profile/currentname"> - без @ с ${$(this).html().match(/\@.+?\b/g)}?

Mark Salvania 13.09.2018 21:39

Нет, это основано на том, что находится в @tagname - в этом примере есть «tagname», как получить его с помощью match. Спасибо

Mark Salvania 13.09.2018 21:56

@MarkSalvania, ладно, ты можешь просто заменить еще одну. заменить @ пустой строкой

95faf8e76605e973 13.09.2018 22:01

Идеально!. Спасибо !. Вы полностью ответили на мой вопрос.

Mark Salvania 13.09.2018 22:07

Другие вопросы по теме