How can I replace @ symbol just from href?-CodePudding

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  href="/profile/$1" >$1</a> ')
console.log(replaced)

Currently, the output was like

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

And I want to achieve something like:

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

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

CodePudding user response：

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  href="/profile/$1" >@$1</a> ')
console.log(a)

const b = text.replace(/@([a-z_\d] )/ig, '<a  href="/profile/$1" >$&</a> ')
console.log(b)

CodePudding user response：

You could capture the @ and username separately.

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