Tengo textos provenientes de la base de datos que deben modificarse antes de mostrarlos.
Por ejemplo, como se ve a continuación, en el bloque de código, un texto puede tener una o varias {variables} que deben reemplazarse por la etiqueta html <i> con un nombre de clase que proviene de la variable.
const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.'; const matched = string.match(/{(.*?)}/g); //["{icon_exit}", "{icon_plus}"] //... replace both with `<i class="icon-${exit or plus}"></i>` return string; //Lorem ipsum dolor sit <i class="icon-exit"></i> consectetur <i class="icon-plus"></i> elit.Puede usar string#replace para cambiar el grupo capturado.
const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.'; const newString = string.replace(/{(.*?)}/g, (_, match) => `<i class="${match.replace('_', '-')}"></i>`); console.log(newString);Puede usar replaceAll con una expresión regular para hacer coincidir esas cadenas y devolver una nueva cadena.
const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.'; const regex = /{icon_(.+?)}/g; const replaced = string.replaceAll(regex, (match, $1) => { return `<i class="icon-${$1}"></i>`; }); console.log(replaced);Mantenlo simple:
function replaceWithTag(string) { return string .replace(/{icon_exit}/g, '<i class="icon-exit"></i>') .replace(/{icon_plus}/g, '<i class="icon-plus"></i>'); } const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.'; console.log(replaceWithTag(string));