etiquetas javascript, jQuery y HTML: cómo comprobar si las etiquetas están cerradas

Question

He tenido este problema muchas veces: creo HTML dinámicamente a través de jQuery, y en este código HTML me gustaría saber si todas las etiquetas están correctamente cerrado.

Si trato de ver qué hay en el DOM con Firebug, cierra automágicamente cada etiqueta que no está bien cerrada, así que no puedo ver en la fuente si todas las etiquetas son en realidad correctamente cerradas.

¿Tiene una idea de cómo podría hacer para averiguar fácilmente si el código HTML que se genera dinámicamente está cerrado correctamente?

Estoy trabajando con un grafista que siempre está modificando el código y ahora se está volviendo bastante complejo (y largo) para ordenar "a mano" el material.

Aquí es una muestra de secuencia de comandos de jQuery me gustaría comprobar:

$('#tableau > tbody:last').append(
    '<tr id="tr_'+d.id+'">'+ 
     '<td id="principal_'+d.id+'" class="principal">' + 
     '<div class="texte" style="overflow:hidden;height:\'100%\'">' + 
      '<div class="newContainer">' + 
      '<div class="container_gauche">' + 
       '<div id="annonce_titre">'+ d.id +' - '+ d.titre +'</div>' + 
       '<div id="annonce_trait1px"></div>' + 
       '<div id="annonce_localisation">Annonce publiée par un ' + type_annonceur + '</div>' + 
       '<div class="clear"></div>' + 
       '<div id="annonce_description">' + d.texte + '</div>' + 
      '</div>' + 
      '<div class="container_droite">' + 
       '<div class="info">' + 
       '<div class="info_gauche">' + tarif_annonce + '</div>' + 
       '<div class="info_droite">' + 
        '<div class="choix_moderateur" ' + 'id="choix_moderateur_' + d.id +'" >' + 
        '<img src="{$img_check_ok}" />'+ 
        '<img src="{$img_check_cancel}" />' + 
        '</div>' + 
       '</div>' + 
       '</div>' + 
       '<div class="clear"></div>' + 
       '<div id="annonce_trait1px"></div>' + 
       '<div id="annonce_images">' + imgs + '</div>' + 
       '<div class="clear"></div>' + 
       '<div id="annonce_trait1px"></div>' + 
       '<div class="annonce_raison_refus">'+ 
       '<div class="raison_refus" '+ 'id="raison_refus_' + d.id + '" ' + 'style="display:none;">' + 
       '<label>{$raison_du_refus}</label>' + 
       '<div class="input_raison_refus">' + 
       '<textarea cols="34" rows="10" ' + 
        'name="texte_raison_refus" ' + 
        'id="texte_raison_refus_' + d.id + '" '+ 
        'maxlength="2500">' + 
       '</textarea>' + 
       '</div>' + 
       '<div class="">' + 
       '<img src="{$img_check_ok}" ' + 
        'class="moderation_refus_ok" ' + 
        'alt="{$alt_img_moderation_refus_ok}" />' + 
       '<img src="{$img_check_cancel}" ' + 
        'class="moderation_refus_cancel" ' + 
        'alt="{$alt_img_moderation_refus_cancel}" />' + 
       '</div>' + 
      '</div>' + 
      '</div>' + 
     '</div>' + 
     '</div>' + 
    '</div>'+ 
    '</td>' + 
'</tr>' 
); 

Muchas gracias!

Answer 1

Está utilizando jQuery mal ....

En lugar de

$('#tableau > tbody:last').append(
    '<tr id="tr_'+d.id+'">'+.... 

que debe hacer

$('#tableau > tbody:last').append(
    $('<tr>').attr({id:d.id}).append($(...etc..etc..) 

El $ ('< somehtmltag>') va a crear nodos DOM directamente y, por lo tanto, no es necesario cerrar las etiquetas; el cierre de la etiqueta solo se convierte en un problema en la representación HTML textual, por lo que se usa javascript para generar un documento HTML que usted a continuación, agregar es ineficaz y causa los problemas que describe de las posibilidades de la sintaxis HTML no válida: si utiliza las funciones jQuery básicas de $ ('< etiqueta>') .css ({}) y .attr ({}) su lado paso todos los problemas de análisis HTLM.

Alternativamente uso algo de HTML templating engine como http://api.jquery.com/jquery.tmpl/ y cuando se edita la plantilla como en un editor HTML sensible, se pondrán de relieve las etiquetas de cierre para que pueda comprobar que hacerlo bien.

Answer 2

He estado haciendo exactamente lo que está haciendo. Pero de hecho se está volviendo desordenado y el eclipse no resalta las pestañas de cierre.

Recomiendo usar algún tipo de motor de plantillas Javascript. utilizo éste: http://api.jquery.com/jquery.tmpl/

Si quieres algo más ligero, comprobar BuildSugar: http://jsfiddle.net/SubtleGradient/4W3RR/ se cierra automáticamente las etiquetas

Answer 3

CONSOLE.LOG el texto de agregación para que pueda obtener la representación textual, a continuación, ejecute a través de la W3C validtor, o ponerlo en un editor de código con paréntesis de corchete/corchete, o usar un embellecedor html en línea. Básicamente, obtenga el texto en bruto, voltéelo y revíselo.

Sin embargo, como ya se mencionó, esta no es la mejor manera de usar jquery. Las plantillas son muy útiles para esto, o puedes combinar montones de elementos entre sí, pero eso se vuelve realmente desordenado y atemorizador.Así que busque plantillas de jquery :)

Answer 4

Escribí un violín que agrega una función checkTags() a jQuery - nada más que hacer mientras mi vieja Mac se restaura, gracias a que mi nuevo dispositivo se convierte en un ladrillo.

http://jsfiddle.net/mhart/5XJ95/

comprueba una cadena, incrementando un recuento de etiquetas cuando se ve un proceso abierto, disminuyendo cuando ve que está cerrado. Simplemente le dice si hay cierres coincidentes para la etiqueta abierta, pero no está verificando la posición de cierre de la etiqueta. Podría ramificarlo y ver si puedo encontrar una función que maneje las posiciones de encerramiento también.

ACTUALIZADO - Aquí hay un violín que comprueba la colocación recinto adecuado, así como la comprobación de que todas las etiquetas de cierre están presentes

http://jsfiddle.net/mhart/MvzaN/

Aquí está la función de

$.checkTags=function(text){ 
    var tags = new Array(); 
    var i=0; 
    var j=0; 
    var k=0; 
    var tag=''; 
    var level=0; 

    i = text.indexOf('<'); 
    while (i>=0) { 
     j = text.indexOf('>', i); 
     if (j == -1) break; 
     k = text.indexOf(' ',i); 
     if (k > i && k < j) { 
      tag = text.substr(i+1,k-i-1); 
     } else { 
      tag = text.substr(i+1,j-i-1); 
     } 
     if (tag.indexOf('/') == 0) { 
      tag = tag.substr(1); 
      tag += level; 
      if (tags[tag] == undefined) { 
       tags[tag] = -1; 
      } else { 
       tags[tag]--; 
      } 
      level--; 
     } else { 
      level++; 
      tag += level; 
      if (tags[tag] == undefined) { 
       tags[tag] = 1; 
      } else { 
       tags[tag]++; 
      } 
     } 
     console.log(tag); 
     i = text.indexOf('<',j); 
    }  

    // Everything should be zero 
    for (tag in tags) { 
     if (tags[tag] != 0) return false; 
     // console.log(tag + ',' + tags[tag]); 
    } 

    return true; 
};