1

necesito una ayuda con este ejercicio. Debo escribir una función llamada template que reciba dos argumentos: una cadena y un objeto. La función debe retornar una nueva cadena reemplazando las variables de la cadena de entrada con los valores definidos en el objeto.

Las variables vienen encerradas en corchetes [] dentro del texto.

template("Hola [nombre]", { nombre: "German" }); // => "Hola German"
template("Hola [nombre], tu saldo es [saldo]", { nombre: "German", saldo: 12000 }); // => "Hola German, tu saldo es 12000"
template("Hola mundo", {}) // => "Hola mundo"

Si la variable no viene definida en el objeto, aparece el texto "undefined" (que es lo que devuelve JavaScript por defecto cuando no se encuentra una llave en un objeto):

template("Hola [nombre]", {}); // => "Hola undefined"

Si sobran variables en el objeto simplemente se ignoran:

template("Hola mundo", { nombre: "German" }); // => "Hola mundo"

Esto es lo que he logrado hacer, ahí está tomando solo el primer valor del objeto pero si son más valores no he podido ver como hacerlo

    const expReg = /\[([^\]]+)]/g;

function template(str, obj) {
  if (Object.keys(obj).length === 0) {
    return str.replace(expReg, "undefined")
  } else {
    let arr = Object.values(obj)
    for (let i = 0; i < arr.length; i++) {
      let val = arr[i]
      return str.replace(expReg, val)
    }
  }
}

Gracias por la ayuda

1 respuesta 1

0

Usando esta expresión regular /\[[a-zA-Z]+\]/g:

  • \[ - Corchete de apertura
  • [a-zA-Z]+ - Una o más letras, minúsculas o mayúsculas
  • \] - Corchete de cierre
  • El modificador g es para buscar en toda la cadena, si se omite, solo va a encontrar una

Con .matchAll() obtienes todas las coincidencias. Recorres cada coincidencia para verificar si existe en el objeto y asignar el valor de remplazo.

function template(str, obj = {}) {
    // Crear expresión regular
    let regEx = /\[[a-zA-Z]+\]/g;
    // Obtener todas las coincidencias en un arreglo
    let matches = [...str.matchAll(regEx)];
    // Recorrer coincidencias
    matches.forEach(match => {
        // Cada coincidencia es un arreglo con una cadena. Ej ["[nombre]"]
        // Tomar elemento y eliminar corchetes
        let property = match[0].substr(1, match[0].length - 2);
        // Obtener valor a asignar si existe en el objeto, de lo contrario, undefined
        let value = (obj.hasOwnProperty(property)) ? obj[property] : 'undefined';
        // Aplicar remplazo para esta coincidencia
        str = str.replace(`[${property}]`, value);
    });
    return str;
}

console.log(template("Hola [nombre]", { nombre: "German" }));
console.log(template("Hola [nombre], tu saldo es [saldo]", { nombre: "German", saldo: 12000 }));
console.log(template("Hola mundo", {}));
console.log(template("Hola [nombre]", {}));

2
  • Me podrías aclarar por favor por qué en matches se usa el spread, no me queda muy claro. Muy clara tu respuesta, muchas gracias Commented el 9 mar. 2022 a las 15:42
  • Leyendo el enlace que puse a la documentación encuentras que matchAll() devuelve un iterador. Se desestructura con el operador spread para convertirlo en un arreglo.
    – Triby
    Commented el 10 mar. 2022 a las 13:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.