CODEWITHSUNDEEP
javascriptregexreplace
Hasham Minhas
Hasham Minhas

Reputation: 508

How can I replace @ symbol just from href?

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?

Upvotes: 0

Views: 46

Answers (2)

3limin4t0r
3limin4t0r

Reputation: 21130

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)

Upvotes: 2

Reyno
Reyno

Reputation: 6505

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)

Upvotes: 1

Related Questions