How can I replace @ symbol just from href?

Question

I have a condition where I wrap the @username values in an anchor to make them clickable

const text = 'test @username'
const replaced = text.replace(/(@[a-z_\d]+)/ig, '<a class="tag_user" href="/profile/$1" >$1</a> ')
console.log(replaced)

Currently, the output was like

test <a class="tag_user" href="/profile/@username" >@username</a>

And I want to achieve something like:

test <a class="tag_user" href="/profile/username" >@username</a>

Can anybody have any idea how can I achieve the expected output?

Answer 1

You could capture the @ and username separately.

const text = 'test @username'
const replaced = text.replace(/(@)([a-z_\d]+)/ig, '<a class="tag_user" href="/profile/$2" >$1$2</a> ')
console.log(replaced)