Estoy usando una función recursiva que toma una cadena de plantilla como esta:

 <div class='${classes}'>

y reemplaza el marcador de posición literal de la plantilla ${clases} con el valor de un objeto que se ve así:

 { classes: 'bg-${color} text-${color}', color: 'blue' }

Algo a tener en cuenta aquí es que dentro del objeto, hay más anidamiento de cadenas de plantilla, de ahí el motivo de la función recursiva.

Lo que no puedo entender es por qué la función reemplazar todo solo reemplaza la primera instancia de ${color} y deja la segunda sin definir.

Fragmento de trabajo a continuación:

 function buildTemplate(string) { var matched = false; string = string.replaceAll(/\$\{(.*?)\}/g, function (match, key) { if (match) { matched = true; } const selection = selectors[key]; delete selectors[key]; return selection; }); if (matched) { string = buildTemplate(string); } console.log(string); } let templateString = "<div class='${classes}'>"; const selectors = { classes: 'bg-${color} text-${color}', color: 'blue' } buildTemplate(templateString);