Find all @tagnames inside element then insert a link on it

Question

I have my html

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

On page load, I wanted to find this @samplename inside .comment-details class using .each() loop and insert it on <a href="samplelink"></a> tag in jQuery or Javascript

I wanted something like this after page load:

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

95faf8e76605e973 · Accepted Answer · 2018-09-13T20:02:13.753

2

jQuery implementation:

$('.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>

edited Sep 13 '18 at 20:02

answered Sep 13 '18 at 18:16

95faf8e76605e973

13,643
3
24
51

I wanted to show the '@currentname' when already inserted in tag. Not always '@samplename' – Mark Salvania Sep 13 '18 at 18:42
@MarkSalvania good spot sir mark. you can use `match` edited my answer – 95faf8e76605e973 Sep 13 '18 at 18:47
Almost :) how can I update `` to `` - without @ with `${$(this).html().match(/\@.+?\b/g)}` ? – Mark Salvania Sep 13 '18 at 19:39
No, it's based on what is on @tagname - this example has 'tagname' how to get it with `match`. Thank you – Mark Salvania Sep 13 '18 at 19:56
@MarkSalvania ah ok, you can just do another replace. replace @ with empty string – 95faf8e76605e973 Sep 13 '18 at 20:01
Perfect!. Thank you !. You completely answered my question. – Mark Salvania Sep 13 '18 at 20:07

m0meni · Answer 2 · 2018-09-13T20:03:15.073

1

In raw JS you can do

[...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>

Explaining each step:

querySelectorAll grabs all the comment details divs
[...] is because of In Javascript, what is the best way to convert a NodeList to an array
then you use the string replace function with a regular expression to do what you want
- /\s?@(\w+)\s?/g grabs all the characters after @, and only does it if there's a space/nothing on either side i.e. hi@potoato wouldn't be matched
- the $1 in the second argument uses the match from the replace

edited Sep 13 '18 at 20:03

answered Sep 13 '18 at 18:10

m0meni

16,006
16
82
141

Works on windows desktop but not working on iphone safari :( – Mark Salvania Sep 13 '18 at 19:37
@MarkSalvania that’s probably because of the Array spread as it’s the only feature that might now work in older browsers. – m0meni Sep 13 '18 at 19:59
Understood. Thank you so much!. – Mark Salvania Sep 13 '18 at 20:00
@MarkSalvania You could instead do `Array.prototype.slice.call(document.querySelectorAll('.comment-details'), 0)` if that doesn't fix the issue...then sorry :'( – m0meni Sep 13 '18 at 20:05

Find all @tagnames inside element then insert a link on it

2 Answers2