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?
The simplest solution is probably to remove @ from the capture group. So @(...) instead of (@...).
Then add the @ as a literal inside the replacement string wherever it is needed. Meaning that /profile/$1 stays the same, but the anchor contents becomes @$1.
Alternatively you could use $& (whole match) instead of @$1.
const text = 'test @username'
const a = text.replace(/@([a-z_\d]+)/ig, '<a class="tag_user" href="/profile/$1" >@$1</a> ')
console.log(a)
const b = text.replace(/@([a-z_\d]+)/ig, '<a class="tag_user" href="/profile/$1" >$&</a> ')
console.log(b)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)