Detect @ and then add CSS using javascript

Question

From the backend, I get JSON in the following format: <p>@username This is awesome.</p>

I have to detect @ in a word and then add a class to the entire word or a span so I can modify the word to something like this:

p span {
  font-weight: bold;
  color: red;
  }

<p><span>@username</span> This is awesome</p>

How do I detect using javascript to get this going? Please note that @ could be anywhere in the paragraph.

Possible duplicate of Is there a CSS selector for elements containing certain text? — Andy Ray
– Andy Ray, Commented Nov 1, 2018 at 15:46
@dmikester1 It's on Angular and so using html-bind. The output after parsing is what is shown in the question. — Elaine Byene
– Elaine Byene, Commented Nov 1, 2018 at 15:57

Richard Parnaby-King · Accepted Answer · 2018-11-01 16:10:34Z

1

This bit of regex will find any word beginning with @ and wrap it (and the @) in a span tag.

var json = "{\"text\":\"<p>@username This is awesome.</p>\"}",
  text = JSON.parse(json).text;

text = text.replace(/(@\w+)/g, '<span>$1</span>');
console.log(text);

This will not work for email addresses. e.g. [email protected] will become a<span>@b</span>.com. Do you need a solution that takes this into account?

answered Nov 1, 2018 at 16:10

Richard Parnaby-King

15k11 gold badges75 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Detect @ and then add CSS using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related