Теги javascript, jQuery и HTML: как проверить, закрыты ли теги - PullRequest
5 голосов
/ 08 декабря 2011

У меня была эта проблема много раз: я динамически создавал HTML с помощью jQuery, и в этом HTML-коде я хотел бы знать, правильно ли закрыты все теги.

Если я попытаюсь увидеть, что находится в DOM с Firebug, он автоматически закроет все теги, которые не были правильно закрыты, поэтому я не вижу в источнике, если все теги на самом деле правильно закрыты.

У вас есть идея, как мне легко узнать, правильно ли закрыт HTML-код, который генерируется динамически?

Я работаю с графистом, который всегда модифицирует код, и теперь становится довольно сложно (и долго) сортировать вещи "вручную".

Вот пример скрипта 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>'
  );  

Большое спасибо!

Ответы [ 4 ]

3 голосов
/ 08 декабря 2011

Вы используете JQuery неправильно ....

Вместо

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

ты должен сделать

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

$ ('') создаст DOM-узлы напрямую, и поэтому нет необходимости закрывать теги - закрытие тегов становится проблемой только в текстовом представлении HTML, поэтому использование JavaScript для генерации HTML Документ, который вы затем добавляете, является неэффективным и вызывает проблемы, которые вы описываете, о возможностях неверного синтаксиса HTML - если вы используете базовые функции jQuery $ ('') .css ({}) и .attr ({} ) вы решите все проблемы с разбором HTLM.

В качестве альтернативы используйте html шаблонизатор , такой как http://api.jquery.com/jquery.tmpl/ и когда вы редактируете шаблон в виде html-чувствительного редактора, он подсвечивает закрывающие теги, чтобы проверить, правильно ли вы его понимаете.

1 голос
/ 08 декабря 2011

console.log добавьте текст, чтобы вы получили текстовое представление, затем запустите его через валидатор w3c, или поместите его в редактор кода с сопоставлением скобок / скобок, или воспользуйтесь html beautifier онлайн. В основном, получите необработанный текст, дамп и проверьте его.

Однако, как уже упоминалось, это не лучший способ использовать jquery. Шаблоны очень полезны для этого, или вы можете глупо добавлять множество элементов друг к другу, но это становится действительно грязным и ужасным. Посмотрите шаблоны jquery:)

1 голос
/ 08 декабря 2011

Я делал именно то, что вы делаете. Но это действительно запутанно, и затмение не выделяет закрывающиеся вкладки.

Я рекомендую использовать какой-нибудь шаблонизатор javascript. Я использую это: http://api.jquery.com/jquery.tmpl/

Если вы хотите что-то более легкое, отметьте BuildSugar: http://jsfiddle.net/SubtleGradient/4W3RR/ Автоматически закрывает теги

0 голосов
/ 08 декабря 2011

Я написал скрипку, которая добавляет функцию checkTags() в jQuery - больше ничего не нужно делать, пока мой старый 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;
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...