How can I perform a case insensitive replace in JavaScript?

Question

I current have the following code:

const pattern = "quick";
const re = new RegExp(pattern, "gi");

const string = "The quick brown fox jumped over the lazy QUICK dog";

const replaced = string.replace(pattern, "<b>" + pattern + "</b>");

console.log(replaced);

It produces the following:

The <b>quick</b> brown fox jumped over the lazy QUICK dog

What I want is:

The <b>quick</b> brown fox jumped over the lazy <b>QUICK</b> dog

I'm having two issues.

Firstly, why isn't QUICK being replaced when I'm using a case insensitive regex?

Secondly, how do I ensure that QUICK is replaced with QUICK and not quick?

you've created a regexp re ... and never use it ... so that's something you should look at - try const replaced = string.replace(re, "" + pattern + ""); — Jaromanda X
– Jaromanda X, Commented Sep 5, 2018 at 1:21

CertainPerformance · Accepted Answer · 2018-09-05 01:21:07Z

12

You need to pass $& as the second parameter to .replace to insert the matched substring:

const string = "The quick brown fox jumped over the lazy QUICK dog";
console.log(
  string.replace(/quick/gi, '<b>$&</b>')
);

Your QUICK isn't being replaced in your original code because

const replaced = string.replace(pattern,

is passing pattern, which is a string, rather than your constructed regex (whose variable name is re). If you had passed re, you would see:

const pattern = "quick";
const re = new RegExp(pattern, "gi");
const string = "The quick brown fox jumped over the lazy QUICK dog";
const replaced = string.replace(re, "<b>" + pattern + "</b>");
console.log(replaced);

which doesn't preserve the original casing, thus the need for '$&'.

edited Sep 5, 2018 at 1:21

answered Sep 5, 2018 at 1:15

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Collectives™ on Stack Overflow

How can I perform a case insensitive replace in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related