Question

我多次遇到过这个问题：我通过jQuery动态创建HTML，在这个HTML代码中，我想知道所有标签是否都已正确关闭。

如果我尝试使用Firebug查看DOM中的内容，它会自动关闭每个未正确关闭的标记，因此如果所有标记实际正确关闭，我无法在源代码中看到

如果动态生成的HTML代码已正确关闭，您是否知道我该怎么做？

我正在和一位经常修改代码的graphist一起工作，现在变得非常复杂（并且很长）来“手动”排序。

以下是我想检查的jQuery脚本示例：

  $('#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>'
  );

非常感谢！

Answer 1

您正在使用jQuery错误....

而不是

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

你应该做

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

$（'＆lt; somehtmltag＆gt;'）将直接创建DOM节点，因此无需关闭标记 - 标记关闭只会成为文本HTML表示中的问题，因此使用javascript生成您随后添加的HTML文档既无效又会导致您描述无效HTML语法可能性的问题 - 如果您使用$（'＆lt; tag＆gt;'）。css（{}）和.attr的基本jQuery函数（ {}）你支持所有HTLM解析问题。

或者使用一些html templating engine等 http://api.jquery.com/jquery.tmpl/当您在html敏感编辑器中编辑模板时，它会突出显示结束标记，以便您检查是否正确。

Answer 2

我一直在做你正在做的事情。但它确实变得凌乱，日食并没有突出关闭标签。

我建议使用某种javascript模板引擎。我用这个：http://api.jquery.com/jquery.tmpl/

如果你想要更轻量级的东西，请检查BuildSugar：http://jsfiddle.net/SubtleGradient/4W3RR/ 它会自动关闭标签

Answer 3

console.log附加文本以便获得文本表示，然后通过w3c验证器运行它，或者将其放在带有大括号/括号匹配的代码编辑器中，或者在线使用html美化器。基本上，获取原始文本，转储并检查它。

然而，如前所述，这不是使用jquery的最佳方式。模板对此非常有用，或者你可以愚蠢地将大量元素相互附加，但这会变得非常混乱和令人厌恶。所以查看jquery模板：）

Answer 4

我写了一个小提琴，为jQuery添加了一个checkTags()函数 - 当我的旧Mac恢复时，没有其他事可做，这要归功于我的新人决定成为一块砖。

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

它检查一个字符串，当它看到打开时递增标记计数，当它看到它关闭时递减。它只是告诉您标签打开是否有匹配的关闭，但它没有检查标签关闭位置。我可能会分支它，看看我是否可以找到一个处理封闭位置的函数。

更新 - 这是一个小提琴，可以检查正确的机箱放置以及检查所有关闭标签是否存在

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

这是功能

$.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;
};

javascript，jQuery和HTML标记：如何检查标记是否已关闭

4 个答案: