2

Tengo una cadena de texto la cual quiero pasar a mi plantilla HTML (utilizo handlebars para correrla), pero dentro del texto que recibo existe una variable que quiero reemplazar antes de pasarsela al HTML.

El texto va algo asi:

Como líder del proyecto {{list_of_projects}} , es importante que evalúe el desempeño de los miembros de su equipo

Entonces, lo que ando buscando es reemplazar la variable list_of_projects la cual es un array de elementos, entonces tengo:

  • Texto: Como líder del proyecto {{list_of_projects}} , es importante que evalúe el desempeño de los miembros de su equipo
  • Reemplazo: ['Projecto1', 'Proyecto 2']
  • Salida esperada: Como líder del proyecto 'Projecto1' , <strong 'Proyecto 2' , es importante que evalúe el desempeño de los miembros de su equipo

Intente el siguiente codigo que les adjunto en el snippet, pero este solo toma un elemento del array

let str = "Como líder del proyecto list_of_projects, es importante que evalúe el desempeño de los miembros de su equipo"

let elementsToReplace = ["Proyecto1", "Proyecto2"]

let newReplace; 
elementsToReplace.map(element => {
  newReplace = str.replace('list_of_projects', element)
});


console.log(newReplace)

¿Cómo puedo hacer para mostrar cada elemento del array? Practicamente estoy tratando de simular con replace lo que hacemos al iterar un array en HTML que con ayuda de handlebar se veria algo asi

 <p style="margin:0;"> Como líder del proyecto {{#each list_of_projects}}<strong> {{this}}{{#unless @last}}, {{/unless}}</strong>{{/each}}, es importante que evalúe el desempeño de los miembros de su equipo </p>

2 respuestas 2

1

Para tu caso, creo que lo mejor usar ListFormat, esta función te permite crear un string, en base a una lista y todo según el idioma

Incluso te permite tener el string con una conjunción y: Por ejemplo, Proyecto1, Proyecto2 y Proyecto3 (observa el y entre Proyecto2 y proyecto3)

let str = "Como líder del proyecto list_of_projects, es importante que evalúe el desempeño de los miembros de su equipo"

let elementsToReplace = ["Proyecto1", "Proyecto2"]

let listaString =  new Intl.ListFormat().format(elementsToReplace);

console.log(listaString);
let newReplace = str.replaceAll("list_of_projects",listaString); 

console.log(newReplace);

Lo otro es usar un join de toda la vida

let str = "Como líder del proyecto list_of_projects, es importante que evalúe el desempeño de los miembros de su equipo"

let elementsToReplace = ["Proyecto1", "Proyecto2"]

let listaString =  elementsToReplace.join(", ");

console.log(listaString);
let newReplace = str.replaceAll("list_of_projects",listaString); 

console.log(newReplace);

1
  • Hola! Me sirvio mucho la funcion ListFormat, anteriormente no la habia visto por lo que no la conocia, pero me gusto bastante he de admitir, ya la habia usado para formatear números telefonicos pero no para listas. Solo tuve que agregar algunas cosas más en la configuracion de mi .tslint pues yo estoy usando nodejs con typescript. Nuevamente muchas gracias
    – Izlia
    Commented el 13 feb. 2023 a las 22:42
1

Para la solución de tu problema, existen 4 casos:

Si el array es de longitud 0:

Retornamos un string vacío si la longitud del array es 0 o no existe ese array, ya que nos daría undefined en este caso.

if (!array || !array.length) return "";

Si el array es de longitud 1:

Si el array tiene 1 elemento, solamente retornaríamos ese elemento.

if (array.length === 1) return array[0];

Si el array es de longitud 2:

Si el array tiene 2 elementos, entonces capturamos esos dos elementos y concatenamos con ...y..., ya que solamente existirían esos 2:

if (array.length === 2) return `${array[0]} y ${array[1]}`;

Si el array es de longitud 3 a más:

Si el array tiene 3 elementos a más, quiere decir que todos los elementos del array serán concatenados con comas: ..., ..., ..., , pero ojo, no nos olvidemos del último elemento. El último elemento, tendría que ser concatenado con la y: y ..., entonces, para el caso de separarlos con comas, tendríamos que recorrer todo el array menos el último del array, ya que el último elemento lo separaremos con la y. También, borro el último espacio y coma de la cadena con slice (borro dos caracteres atrás) para luego concatenarlo con el y ...:

for (let i = 0; i < array.length - 1; i++) {
  result += array[i] + ", ";
}

result = result.slice(0, -2);

result += ` y ${array[array.length - 1]}`;

Código completo (explicación en comentarios):

function convertirArray(array) {
  let result = ""; // inicializo "result" para mostrar el resultado final.

  // solo para los casos especiales...
  if (!array || !array.length) return ""; // para el caso de que no haya ningún parámetro o sea un array vacío, retorno "".
  if (array.length === 1) return array[0]; // para el caso de que el array sea de 1 longitud, retorno ese único elemento.
  if (array.length === 2) return `${array[0]} y ${array[1]}`; // para el caso de que el array sea de 2 de longitud, retorno esta cadena => ${array[0]} y ${array[1]}.

  // si el array nunca entran en esas condiciones de ariba (o sea, si el array es de 3 a más de longitud), recorro todos los elementos del array MENOS EL ÚLTIMO..
  for (let i = 0; i < array.length - 1; i++) {
    result += array[i] + ", "; // concatenando de esta forma (con comas)...
  }
  
  // borramos el último espacio y coma de la cadena echa con el for...
  result = result.slice(0, -2);
  
  // para luego, con el último elemento de ese array, concatenarlo el resultado del for con el "y..." y ese último elemento.
  result += ` y ${array[array.length - 1]}`;

  return result; // retorno el resultado final.
}

let test1 = [];
let test2 = [""];
let test3 = ["Proyecto1"];
let test4 = ["Proyecto1", "Proyecto2"];
let test5 = ["Proyecto1", "Proyecto2", "Proyecto3"];
let test6 = ["Proyecto1", "Proyecto2", "Proyecto3", "Proyecto4"];

console.log(convertirArray(test1));
console.log(convertirArray(test2));
console.log(convertirArray(test3));
console.log(convertirArray(test4));
console.log(convertirArray(test5));
console.log(convertirArray(test6));

console.log("\n");

// Reemplazo a "list_of_projects" de la cadena por el resultado de la función.
let cadena = `Como líder del proyecto list_of_projects, es importante que evalúe el desempeño de los miembros de su equipo.`;
let cadenaReplace = cadena.replaceAll("list_of_projects",convertirArray(test6)); 
console.log(cadenaReplace);

1
  • Muchas gracias por explicarme paso a paso la funcion, esta tambien es una respuesto que sugiero pues tomamos todos los casos y se formatea la lista.
    – Izlia
    Commented el 13 feb. 2023 a las 22:46

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.