How to concat string and add html tag to it?

Question

I have string something like:

Lorem ipsum dolor sit amet, #consectetur and #adipiscing

I want to add html tag for hashtags which are present in the string. Expected Output is:

Lorem ipsum dolor sit amet, <a href="/users/tag/consectetur">#consectetur</a> and <a href="/users/tag/adipiscing">#adipiscing</a>

I am using javascript string operator split() and join(), but I am not getting the expected output.

 const string = "Lorem ipsum dolor sit amet, #consectetur and #adipiscing" function addHtmlTag(string){ string = string.split("#").join('<a href="#/users/tag/">#</a>'); return string } console.log(addHtmlTag(string))

What will be the changes for adding html tag?

Probably you're not getting the expected output because the code crashes at const string = Lorem ipsum ? This is a syntax error — Jeremy Thille
– Jeremy Thille, Commented Oct 19, 2021 at 7:53

Sinan Yaman · Accepted Answer · 2021-10-19 07:55:14Z

You can use something like this:

const str = "Lorem ipsum dolor sit amet, #consectetur and #adipiscing" const replacedStr = str.split(" ").map(word => ( word[0] === "#" ? `<a href="/users/tag/${word.split("#")[1]}">${word}</a>` : word )).join(" ") console.log(replacedStr)

This searches for words that starts with "#" and append the a tag based on the word.

Sinan Yaman · Accepted Answer · 2021-10-19 08:02:53Z

It can replace with regexp

 const str = 'Lorem ipsum dolor sit amet, #consectetur and #adipiscing' const result = str.replace(/#(\w+)\b/g, '<a href="/users/tag/$1">#$1</a>') console.log(result)

Raoof Subi · Accepted Answer · 2021-10-19 07:55:05Z

0

You missed Double qutes ("")

const string = "Lorem ipsum dolor sit amet, #consectetur and #adipiscing"

answered Oct 19, 2021 at 7:55

Raoof Subi

215 bronze badges

1 Comment

Sinan Yaman Over a year ago

I guess that was just a copy paste error.

Collectives™ on Stack Overflow

How to concat string and add html tag to it?

3 Answers 3

3 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Related