Estoy trabajando en un proyecto en Typescript donde necesito dividir un texto basado en ciertos patrones utilizando expresiones regulares. Para esto, estoy utilizando el método matchAll de la clase String.
Lo que quiero lograr es poder dividir un texto para contruir un nuevo arreglo en base a patrones y validaciones que me ayuden a colocarlo en el indice correcto del nuevo arreglo a crear.
Este es la estructura que generalmente tiene el texto:
"1. Ir a la sección Ventas. 2. Seleccionar los productos que desea agregar al carrito, dando clic sobre cada producto, así se agregan y visualizan en la lista. 3. Luego, dar clic en el botón 'Cobrar' para continuar con el proceso de pago. {{IMG1}} 4. Escoger el método de pago. {{IMG2}} ... 13. Para ver cómo generar una venta App Cobro dispone del siguiente video: ¿Cómo realizar una venta y cobrar con efectivo? {{VIDEO1}} "
Generalmente estos tienen las "etiquetas" video o imagen, la intención es que por cada una de estas etiquetas se reemplace con el link de la imagen. Yo tengo los links almacenado en un array de string con el mismo indice con el que esta creado en el texto, por ejemplo: La {{IMG1}} se veria reemplazada por la "url1" y asi sucesivamente. De igual forma se manejaría para los videos.
Entonces tendria que dividir primeramente el texto
["1. Ir a la sección Ventas.", "2. Seleccionar los productos que desea agregar al carrito, dando clic sobre cada producto, así se agregan y visualizan en la lista.", "3. Luego, dar clic en el botón 'Cobrar' para continuar con el proceso de pago. {{IMG1}}", "Escoger el método de pago. {{IMG2}}", ..., "13. Para ver cómo generar una venta App Cobro dispone del siguiente video: ¿Cómo realizar una venta y cobrar con efectivo? {{VIDEO1}}"]
Luego se tendría que crear el nuevo arreglo con la siguiente estructura
[{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "55555",
"type": "text",
"text": {
"preview_url": false,
"body": "1. Ir a la sección Ventas."
}
}, {
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "55555",
"type": "text",
"text": {
"preview_url": false,
"body": "2. Seleccionar los productos que desea agregar al carrito, dando clic sobre cada producto, así se agregan y visualizan en la lista."
}
},{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "from",
"type": "image",
"image": {
"link": "url1",
"caption": "3. Luego, dar clic en el botón 'Cobrar' para continuar con el proceso de pago."
}
},{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "from",
"type": "image",
"image": {
"link": "url2",
"caption": "4. Escoger el método de pago."
}
},{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "from",
"type": "image",
"image": {
"link": "videoUrl1",
"caption": "13. Para ver cómo generar una venta App Cobro dispone del siguiente video: ¿Cómo realizar una venta y cobrar con efectivo?"
}
}]
Como ven si la cadena de texto no incluye algunas de las etiquetas iria solo, de lo contrario se reemplazaria el url en la posición del indice junto al texto de este mismo.
El codigo que tengo actualmente es que busca sobre el texto si es IMG o VIDEO con una expresion regural donde (\d+) seria el numero del indice. Luego utilizo matchAll para buscar sobre esa RegEx y creo un nuevo arreglo
const imgRegex = /\{\{(IMG|VIDEO)(\d+)\}\}/g;
const matches = [...texto.matchAll(imgRegex)];
[
[
"{{IMG1}}",
"IMG",
"1"
]
]
Luego la intención es recorrerlo para posicionar la url con el la imagen correcta
let lastIndex = 0;
for (let i = 0; i < matches.length; i++) {
const match = matches[i][0];
const matchIndex = matches[i].index;
const matchType = match.startsWith("{{IMG") ? "image" : "video";
const textBeforeMatch = texto.substring(lastIndex, matchIndex);
if (textBeforeMatch.trim().length > 0) {
result.push({
messaging_product: "whatsapp",
recipient_type: "individual",
to: "5555",
type: "text",
text: {
preview_url: false,
body: textBeforeMatch.trim(),
},
});
}
if (matchType === "image") {
const imgIndex = parseInt(match.match(/\d+/)[0]) - 1;
result.push({
messaging_product: "whatsapp",
recipient_type: "individual",
to: "5555",
type: "image",
image: {
link: urls[imgIndex],
caption: match,
},
});
} else if (matchType === "video") {
const videoIndex = parseInt(match.match(/\d+/)[0]) - 1;
result.push({
messaging_product: "whatsapp",
recipient_type: "individual",
to: "5555",
type: "image",
image: {
link: videoUrl[videoIndex],
caption: match,
},
});
}
lastIndex = matchIndex + match.length;
}
El bucle for se utiliza para iterar sobre los elementos coincidentes encontrados en el texto a través de la expresión regular imgRegex. El bucle for comienza con la inicialización de la variable de control i con un valor de 0. Luego, se establece una condición de finalización: i < matches.length, lo que significa que el bucle se ejecutará mientras el índice i sea menor que la longitud de la matriz matches.
En cada iteración del bucle, se realizan las siguientes acciones:
- Se obtiene el elemento de coincidencia actual utilizando
const match = matches[i][0]
. - Se obtiene el índice de la coincidencia actual utilizando
const matchIndex = matches[i].index
. - Se determina el tipo de coincidencia (image o video) utilizando
const matchType = match.startsWith("{{IMG") ? "image" : "video"}
. - Se obtiene el texto antes de la coincidencia actual utilizando const
textBeforeMatch = texto.substring(lastIndex, matchIndex)
. - Después de realizar estas acciones, el bucle avanza a la siguiente iteración incrementando el valor de i en 1 (i++), y continúa hasta que se cumpla la condición de finalización.
Solo que no logro ajustarlo para colocar el texto en donde esta su url, porque en lugar de eso se crea un nuevo objeto por cada url que asigna, si bien lo hace en el orden correcto, tambien agrega todas las urls cuando no se estan llamando en el texto
Les comparto una demo donde simulo mi problema: DEMO
He estado investigando diferentes enfoques y métodos para lograr esto, pero no he encontrado una solución clara. ¿Alguien podría sugerirme una forma eficiente de realizar esta división?
Aprecio cualquier ayuda o consejo que puedan brindarme. Si es posible, agradecería también que proporcionen ejemplos de código para ilustrar la solución.
¡Muchas gracias por adelantado!