0

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:

  1. Se obtiene el elemento de coincidencia actual utilizando const match = matches[i][0].
  2. Se obtiene el índice de la coincidencia actual utilizando const matchIndex = matches[i].index.
  3. Se determina el tipo de coincidencia (image o video) utilizando const matchType = match.startsWith("{{IMG") ? "image" : "video"}.
  4. Se obtiene el texto antes de la coincidencia actual utilizando const textBeforeMatch = texto.substring(lastIndex, matchIndex).
  5. 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!

1 respuesta 1

1

Aqui te dejo un enfoque ligeramente diferente, de todas maneras te paso una demo con el código final, tienes una cadena de texto denominada 'steps' a la que voy a procesar de la siguiente manera:

  • Defino una interfaz MsjObj que representara los objetos del arreglo final.
  • Convierto 'steps' a un array de cadenas mediante una función que usa una expresión regular en el cuerpo.
  • Paso ese array como argumento a la funcion buildBodyToWSP()

Este arreglo que recibe la funcion buildBodyToWSP() tendra los distintos pasos en cada indice, jugaremos con cada elemento del arreglo internamente y crearemos un arreglo nuevo con los objetos de la forma deseada, para eso nos ayudamos con la funcion reduce().

La interfaz y la funcion que divide 'steps' serian estas:

const divideSteps = (steps: string) => [...steps.match(/\d{1,3}\.[\w\W\s]+?(?=((\d{1,3}\.)|$))/gm) as RegExpMatchArray] 

interface MsjObj { // definimos interfaz para los distintos objetos del arreglo que necesitamos
  messaging_product: string,
  recipient_type: string,
  to: string,
  type: 'text' | 'image' | '',
  text?: { preview_url: boolean, body: string }
  image?: { link: string, caption: string }
}

Una vez dividido 'steps' en un arreglo, lo pasamos como argumento a buildBodyToWSP() que tendrá este cuerpo (los argumentos que no usas de todas maneras los deje), tienes comentado cada paso de la misma:

function buildBodyToWSP(steps: string[], imgUrls: string[], videoUrls: string[], from: string) {

  let result: MsjObj[] = steps.reduce((accumulated, current) => { // para cada 'step'

    let msj: MsjObj; // definimos una referencia a un objeto de tipo 'MsjObj'
    msj = { messaging_product: 'whatsapp', recipient_type: 'individual', to: '55555', type: '' }; // asignamos las propiedades que son iguales para todos
    msj.messaging_product = 'whatsapp'
    msj.recipient_type = 'individual'

    let match = current.match(imgRegex) // variable para decidir el tipo de msj

    if(!match) { // si no hay coincidencias, entonces es de tipo texto

      msj.type = 'text';
      msj.text = { preview_url: false, body: current }

    } else { // sino

      let imgdata: string = match[0].replace(/{|}/g, '') // tomamos la coincidencia y le quitamos las llaves
      msj.type = 'image' // colocamos el tipo image (no se porque no existe el type: 'video' en tu logica la verdad)
      let idx = imgdata.match(/(?<=IMG|VIDEO)\d+/g) ?? [] // obtenemos el numero que va junto a 'IMG' o 'VIDEO'

      if(imgdata.includes('IMG')) { // si la coincidencia contiene la cadena: 'IMG'
        msj.image = { 
          link: imgUrls[imgUrls.indexOf(`url${idx}`)],  // obtenemos el link de la lista de links de imagenes correspondiente , el indice lo obtenemos con indexOf y el numero extraido de la etiqueta del 'step'
          caption: current.replace(imgRegex, '').trim()} // obtenemos el msj sin la etiqueta
      }
      
      if(imgdata.includes('VIDEO')) { // si la coincidencia contiene la cadena: 'IMG' hacemos lo mismo que en el if anterior pero con el arreglo 'videoUrls'
        msj.image = { 
          link: videoUrls[videoUrls.indexOf(`videoUrl${idx}`)], 
          caption: current.replace(imgRegex, '').trim()}
      }
    }

    accumulated.push(msj); // pusheamos al acumulador el objeto 'MsjObj' definido
    return accumulated // retornamos el acumulador
    
  }, [] as MsjObj[])

  return result

}

Ahora utilizamos la función y su array devuelto, imprimiendo este ultimo:

const prepareResToWSP = buildBodyToWSP( // obtenemos nuestro arreglo objetivo
  divideSteps(data.results.steps),
  imgUrls,
  videoUrls,
  '5049999999',
);

console.log(prepareResToWSP) // imprimimos

Esto obtendrá la salida esperada, aquí tienes la DEMO.

Básicamente en cada iteración del reduce vamos creando un nuevo objeto MsjObj con los valores básicos, a medida que vamos validando el 'step' vamos definiendo sus propiedades como el tipo y la url correspondiente, para eso necesitamos obtener los datos del 'step' mediante extracciones de cadenas con expresiones regulares o métodos de strings. Una vez definido el objeto lo agregamos al acumulador del reduce mediante push (que esta definido como de tipo MsjObj[]). Este sera nuestro arreglo resultado.

Cualquier cosa no dudes en preguntar.

1
  • 1
    No te pude agradecer correctamente en su momento ya que no me conecte hasta este momento. Muchas gracias me salvaste, esto es justo lo que necesitaba solo le hice unas modificaciones con algunas validaciones regulares para agregar otros valores adicionales a los objetos, pero me ayudaste mucho. Tu explicacion fue clara, Gracias!
    – Izlia
    Commented el 18 jul. 2023 a las 22:53

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.