javascript - 查找元素内的所有@tagnames，然后在其上插入链接

Question

我有我的html

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

在页面加载时，我想在 .comment-details 中找到这个 @samplename类使用 .each()循环并将其插入 <a href="samplelink"></a> jQuery 或 Javascript

中的标记

页面加载后我想要这样的东西:

<div class="comment-details">Hello <a href="samplelink">@samplename</a> This is my comment</div>

Answer 1

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>