1

Estoy obteniendo una cadena de html de un editor de texto llamado froala, pero este editor no cierra las etiquetas img.

Como podria tomar una cadena html que contenga etiquetas de este tipo:

<img src="rutaxx" alt="altxx" class="classxxx">

y pasarlas a esto:

<img src="rutaxx" alt="altxx" class="classxxx"/>
3
  • Te recomiendo que te leas el recorrido para que veas como funciona el sitio y cómo preguntar. Deberías intentar primero solucionarlo por tu propio pie, y si no consigues solucionarlo o tienes algún error, preguntar poniendo tú código para que te podamos ayudar @NataliGamboa
    – DevCodeG
    Commented el 23 jul. 2018 a las 12:37
  • 1
    En html5 no hace falta poner la barra en etiquetas de elementos vacíos (los que no requieren una etiqueta de cierre, como <br>, <img> o <hr> por ejemplo). ¿Hay algún motivo concreto por el que quieras añadírsela?
    – Alvaro Montoro
    Commented el 23 jul. 2018 a las 13:28
  • Si, porque la libreria que usa el backend para crear un pdf a partir de la cadena html, solo admite que las etiquetas <img> <br> o <hr> esten cerradas. Commented el 25 jul. 2018 a las 19:20

1 respuesta 1

1

Esta función te podría servir:

Primero quitamos los espacios en blanco del inicio y del final con trim.

Luego obtenemos todas las etiquetas de tipo img con el siguiente regex usando la función match:

/(<(img[^>]+)>)/ig

Esto te generará un array de strings con formato de tipo etiqueta img.

Luego insertamos el slash de cierre de etiqueta al final de tu cadena usando la función slice y volvemos a insertar la etiqueta modificada en la cadena.

var cadena = ' <p><img src="i0.wp.com/wptavern.com/wp-content/uploads/2016/07/…\" class=\"fr-fic fr-dii\" style=\"width: 228px;"></p><p><span style="color: rgb(226, 80, 65);">esto es un parrafo en rojo</span></p> ';

// Quitamos los espacios en blanco
cadena = cadena.trim();

//Buscamos las etiquetas img dentro de la cadena
var tags = cadena.match(/(<(img[^>]+)>)/ig);
if (tags != null) {
  tags.forEach(function(tag, i) {

    // Guardamos la posición de la etiqueta
    var position = cadena.indexOf(tag);

    // Eliminamos la antigua etiqueta
    cadena = cadena.replace(tag, '');

    // Agregamos el "/" antes de cerrar la cadena
    tag = tag.slice(0, tag.length - 1) + "/" + tag.slice(tag.length - 1);

    // Insertamos la nueva etiqueta en la cadena
    cadena = [cadena.slice(0, position), tag, cadena.slice(position)].join('');

  });
}

console.log("Nueva Cadena: \n\n" + cadena);

6
  • El problema esta en que la cadena no solo contendria una etiqueta img, sino varias img y de cualquier tipo html , por ejemplo: <p><img src="i0.wp.com/wptavern.com/wp-content/uploads/2016/07/…\" class=\"fr-fic fr-dii\" style=\"width: 228px;"></p><p><span style="color: rgb(226, 80, 65);">esto es un parrafo en rojo</span></p> Commented el 25 jul. 2018 a las 19:30
  • Ya arregle la funcion para que haga esas validaciones, dale una mirada Commented el 25 jul. 2018 a las 20:47
  • Infinitas gracias amigo :D. Commented el 25 jul. 2018 a las 22:01
  • hola,la funcion me elimina el texto que esta entre las etiquetas que no sean de img, mira: cadena inicial: <p>texto 1</p><p><span style="color: rgb(226, 80, 65);"><img src="blob:localhost:4200/a8604c45-6d26-4062-8e5b-421e005b1015" style="width: 149px;" class="fr-fic fr-dib fr-fil"></span></p> cadena resultante: desaparece el texto 1 <p></p><p><span style="color: rgb(226, 80, 65);"><img src="blob:localhost:4200/a8604c45-6d26-4062-8e5b-421e005b1015" style="width: 149px;" class="fr-fic fr-dib fr-fil"/></span></p> Commented el 26 jul. 2018 a las 14:01
  • y cuando la cadena no tiene img, simplemente guarda una etiqueta <p></p> ignorando el resto de contenido Commented el 26 jul. 2018 a las 14:02

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.