JavaScript/CSS - find text with a particular expression and add css to it

Question

I have the below text stored in a variable :

var string = "[~Folky Bee] How are you today?";

What I want to do is to add a class/style for only the text inside the delimiters [~Text here] which will have a final output like the following for example :

Folky Bee How are you today?

So far, I've tried to do the following :

var str = "[~Folky Bee] How are you today";
//Returns 1 (true) if the match is found (but I am getting wrong 
//results, maybe it's a wrong RegEx)
var n = str.search(/~/i);
//Then if the match is found add a color to it, but in this case I don't have 
//an id of that element so I can select it doing a .getElementById for example. 
//It's only a plain string.

you probably forgot to add some relevant code like the regexp you are using — user2399035
– user2399035, Commented Sep 24, 2018 at 15:58
@epascarello that's the thing, I wasn't able to match those brackets and what's more challenging is adding css to what's inside because it's whole plain text — Folky.H
– Folky.H, Commented Sep 24, 2018 at 16:01

Nina Scholz · Accepted Answer · 2018-09-24 17:45:40Z

3

You could seach for brackets with tilde and take the inner group for the replacement with the style.

var string = "[~Folky Bee] How are you today?<br>[~Wham!] Fine!",
    replaced = string.replace(/\[~(.*?)\]/g, '<span class="foo">$1</span>');
    //                             ^^^        keeps value       ^^ 

console.log(replaced);
document.body.innerHTML += replaced;

.foo { font-weight: bold; }

edited Sep 24, 2018 at 17:45

answered Sep 24, 2018 at 16:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

3 Comments

Folky.H Over a year ago

Thanks for your answers; however, the following is not clear for me : <span class="foo">$1</span> it seems that if I replace it with any other value it still does not change anything

Nina Scholz Over a year ago

what does not change? the original string? (string are immutable.) which value do you like to replace?

Folky.H Over a year ago

Sorry, my bad, after your last edit it made things clear for me!

Collectives™ on Stack Overflow

JavaScript/CSS - find text with a particular expression and add css to it

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related