如何使用RegEx替换JavaScript中的$ {variable}字符串？

Question

Let's say I have the following string:

const str = '<title>${ title }</title>';

I want to replace ${ title } with any other string. The placeholder can also look like this:

• ${title}
• ${ title}
• ${title }

So, I created a replace function using a regex:

// If name = "title", then this function should replace ${ title } within str with content.
function replace(str, name, content) {
  const pattern = `\${[ ]{0,}${name}[ ]{0,}}`;
  const rex = new RegExp(pattern, 'g');
  console.log(rex); // Outputs /${[ ]{0,}title[ ]{0,}}/g
  return str.replace(rex, content);
}

I call it like this:

const str = '<title>${ title }</title>';
const title = 'TOAST!!';
const res = replace(str, 'title', title); // ${ title } is not replaced :-(

But for some reason it doesn't work. The searchstring is not being replaced.

What's wrong?

Ps: This works!

str.replace(/\${[ ]{0,}title[ ]{0,}}/g, 'TOAST!!');

Answer 1

Dang it, while writing the question I figured out, that I need to add 3(!) backslashes to escape the $ sign like this:

const pattern = `\\\${[ ]{0,}${name}[ ]{0,}}`;

So, the correct function looks like this:

function replace(str, name, content) {
  const pattern = `\\\${[ ]{0,}${name}[ ]{0,}}`;
  const rex = new RegExp(pattern, 'g');
  return str.replace(rex, content);
}

Calling it like this:

const str = '<title>${ title }</title>';
const title = 'TOAST!!';
const res = replace(str, 'title', title);
console.log(res);

Returns:

<title>TOAST!!</title>