Crear parser de HTML a JSON

[omiras]

Objetivo y análisis

• Necesitamos parsear el HTML que nos proviene del cliente (o parsearlo en el ciente); para poder manipular mejor más adelante
• Buscar si existen biblitoecas, algoritmos ya creados, etc; que nos ayuden en esto
• Guardar en base de datos con el esquema adecuado el formulario
• Hay que decidir si se parsea el código generado en clietne o servidor:

<div class="mb-3" draggable="false" style=""> <label class="fw-bold form-label">Nombre</label> <input type="text" name="name" class="form-control"> </div><div class="mb-3" draggable="false" style=""> <label class="fw-bold form-label">Teléfono</label> <input type="tel" name="tel" class="form-control"> </div><div class="mb-3 sortable-chosen sortable-ghost" draggable="true" style="transform: translateZ(0px);"> <label class="fw-bold form-label">Email</label> <input type="email" name="email" class="form-control"> </div>

const responseSchema = new Schema({
  fieldValues: Mixed
})

const controlSchema = new Schema({
  type: {
    type: String,
    enum: ['input', 'textarea', 'select']
  },
  maxlength: Number,
  required: Boolean,
  responses: [responseSchema]
})

const formSchema = new Schema({
  html: String,
  slug: String,
  fields: [controlSchema]

});

[aaronaira]

Incluimos función helper slugify() para generar names dinámicos en función del label

[arlomba]

• Se ha creado el esquema para la base de datos.
• Se ha seleccionado la biblioteca node-html-parser.
• Se ha actualizado la plantilla donde se muestra el formulario generado para renderizarlo.

Esquema de la Base de datos

Cada formulario será un array de campos, y cada campo se guardará con el tipo, de input nombre y texto. El nombre e id del input se genera según la posición del campo, por ejemplo nombre[0], telefono[1], email[2].

const fieldSchema = new Schema({
  input: {
    type: String,
    enum: ["tel", "text", "email", "file", "textarea"],
  },
  name: String,
  label: String,
});

const formSchema = new mongoose.Schema({
  fields: [fieldSchema],
});

Bibliotecas

Después de explorar varias propuestas en Openbase, nos hemos decantado por node-html-parser, es rápida, sencilla de utilizar e implementa las DOM APIs propias de los navegadores.

[omiras]

Creación de los tests para probarl a issue @arlomba .