Update String using regex

Question

With below code I'm attempting add a style to a string using regex, but instead of 'updated' being set to <'span style='color:blue' >test</span> text' its being set as 'test text'. Am I misusing regex ?

src :

var text = 'test text';
var stringToStyle = 'test';                   
var update = "<span style='color:blue' >" + stringToStyle + "</span>";
var updated = text.replace('/'+stringToStyle+'/gi' , update);

console.log(update);
console.log(updated);

plunkr : https://plnkr.co/edit/6uO3M8kATQLXvWWVx1Vw?p=preview

Looks like you come from PHP. Try var updated = text.replace(RegExp(stringToStyle, "gi") , update); — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 10, 2016 at 11:56
Why did you choose to accept an "unsafe" solution? Just curious. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Feb 10, 2016 at 12:23
@WiktorStribiżew I know 'stringToStyle' will not contain regex characters so I accepted the simpler solution. I do appreciate your answer and did upvote, thanks — blue-sky
– blue-sky, Commented Feb 10, 2016 at 13:14

Daniel A. White · Accepted Answer · 2016-02-10 11:57:09Z

3

You are passing a string, not a regex, into .replace. Note that this isn't very safe in the case stringToStyle has regex control chars.

var regexp = new RegExp(stringToStyle, 'gi');
var updated = text.replace(regexp, update);

or you could just pass stringToStyle directly, which would be safe.

edited Feb 10, 2016 at 11:57

answered Feb 10, 2016 at 11:56

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

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

Comments

Wiktor Stribiżew · Accepted Answer · 2016-02-10 12:00:19Z

1

Note you can't concatenate variables with regex delimiters like you can in PHP. You need to use a RegExp constructor notation to build your dynamic pattern using variables. You can safely use

var updated = text.replace(RegExp(stringToStyle.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi") , update);

The .replace(/[.*+?^${}()|[\]\\]/g, "\\$&") comes from this MDN reference. This "trick" will escape all the special metacharacters that must be escaped for a regex pattern.

If you use

var updated = text.replace(stringToStyle, update);

It will perform one single replacement. Perhaps, it is all you need.

answered Feb 10, 2016 at 12:00

Wiktor Stribiżew

631k41 gold badges502 silver badges633 bronze badges

Collectives™ on Stack Overflow

Update String using regex

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related