Thẻ javascript, jQuery và HTML: cách kiểm tra xem các thẻ có bị đóng không

Question

Tôi đã gặp sự cố này nhiều lần: Tôi tạo HTML động qua jQuery và trong mã HTML này tôi muốn biết liệu tất cả các thẻ có đúng không đã đóng cửa.

Nếu tôi cố gắng xem nội dung trong DOM bằng Firebug, nó tự động đóng mọi thẻ không đóng đúng cách, vì vậy tôi không thể thấy trong nguồn nếu tất cả các thẻ là thực sự là được đóng đúng cách.

Bạn có biết cách tôi có thể thực hiện để tìm hiểu dễ dàng nếu mã HTML được tạo động được đóng đúng không?

Tôi đang làm việc với một người vẽ đồ thị luôn sửa đổi mã và giờ nó trở nên khá phức tạp (và dài) để sắp xếp "bằng tay" nội dung.

Dưới đây là một mẫu của jQuery kịch bản tôi muốn kiểm tra:

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

Cảm ơn bạn rất nhiều!

Answer 1

Bạn đang sử dụng jQuery sai ....

Thay vì

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

bạn nên làm

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

Các $ ('< somehtmltag>') sẽ tạo ra các nút DOM trực tiếp và do đó không cần phải đóng các thẻ - việc đóng thẻ chỉ trở thành một vấn đề trong biểu diễn HTML văn bản, vì vậy hãy sử dụng javascript để tạo một tài liệu HTML mà bạn sau đó thêm cả hai đều không hiệu quả và gây ra các vấn đề bạn mô tả về khả năng cú pháp HTML không hợp lệ - nếu bạn sử dụng các hàm jQuery cơ bản của $ ('< tag>') .css ({}) và .attr ({}) bên cạnh bạn bước tất cả các vấn đề phân tích cú pháp HTLM.

Ngoài ra sử dụng một số html templating engine như http://api.jquery.com/jquery.tmpl/ và khi bạn chỉnh sửa các mẫu như một trong một trình soạn thảo html nhạy cảm, nó sẽ làm nổi bật các thẻ đóng cửa để bạn có thể kiểm tra xem bạn nhận được nó ngay.

Answer 2

Tôi đã làm chính xác những gì bạn đang làm. Nhưng nó thực sự nhận được lộn xộn và nhật thực không làm nổi bật các tab đóng.

Tôi khuyên bạn nên sử dụng một số loại công cụ tạo khuôn mẫu javascript. tôi sử dụng cái này: http://api.jquery.com/jquery.tmpl/

Nếu bạn muốn một cái gì đó nhẹ hơn, kiểm tra BuildSugar: http://jsfiddle.net/SubtleGradient/4W3RR/ Nó sẽ tự động đóng thẻ

Answer 3

console.log văn bản append để bạn có được những đại diện văn bản, sau đó chạy nó thông qua w3c validtor, hoặc đặt nó trong một trình soạn thảo mã với cú đúp/khung khớp hoặc sử dụng một trình làm đẹp html trực tuyến. Về cơ bản, lấy văn bản thô, đổ nó và kiểm tra nó.

Tuy nhiên như đã đề cập, đây không phải là cách tốt nhất để sử dụng jquery. Mẫu rất hữu ích cho việc này, hoặc bạn có thể đi ngớ ngẩn phụ tải các phần tử với nhau, nhưng điều đó thực sự lộn xộn và bất tiện.Vì vậy, tìm kiếm các mẫu jquery :)

Answer 4

Tôi đã viết một fiddle thêm một hàm checkTags() vào jQuery - không có gì khác để làm trong khi máy Mac cũ của tôi khôi phục, nhờ người mới quyết định trở thành một viên gạch.

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

Nó kiểm tra một chuỗi, incrementing một số thẻ khi nó thấy một mở, decrementing khi nó thấy nó đóng cửa. Nó chỉ cho bạn biết nếu có các đóng phù hợp để mở thẻ, nhưng nó không kiểm tra vị trí đóng thẻ. Tôi có thể chi nhánh nó và xem tôi có thể làm việc ra một chức năng mà xử lý các vị trí kèm theo, quá.

CẬP NHẬT - Dưới đây là một fiddle để kiểm tra để có vị trí bao vây đúng đắn cũng như kiểm tra xem tất cả các thẻ đóng có mặt

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

Dưới đây là các chức năng

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