У меня есть мой 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>
В необработанном 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 не будет соответствовать@MarkSalvania, вероятно, из-за распространения Array, поскольку это единственная функция, которая теперь может работать в старых браузерах.
Понял. Большое спасибо!.
@MarkSalvania Вместо этого вы могли бы сделать Array.prototype.slice.call(document.querySelectorAll('.comment-details'), 0)
, если это не решит проблему ... тогда извините: '(
Реализация 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>
Я хотел показать @currentname, когда он уже вставлен в тег <a>. Не всегда @samplename
@MarkSalvania хорошее место, сэр Марк. вы можете использовать match
отредактировал мой ответ
Почти :) как обновить <a href = "samplelink">
до <a href = "profile/currentname">
- без @ с ${$(this).html().match(/\@.+?\b/g)}
?
Нет, это основано на том, что находится в @tagname - в этом примере есть «tagname», как получить его с помощью match
. Спасибо
@MarkSalvania, ладно, ты можешь просто заменить еще одну. заменить @ пустой строкой
Идеально!. Спасибо !. Вы полностью ответили на мой вопрос.
Работает на рабочем столе Windows, но не работает на сафари iphone :(