JQuery的伯爵錶行

Question

我知道計數文檔中的標籤的數量可以用的東西做類似下面的

var tableCount = $('body table tr').length; 

現在我相信，這隻能算作標籤的數量。我想知道的是，我擁有相同數量的結束標籤。所以如果上面的代碼顯示有72個標籤，我現在想告訴我有72個關閉tr標籤。

這可能嗎？

感謝

Answer 1

理想情況下，你可以使用這樣的功能：

function checkTable(tableElement) { 

    // Get inner HTML 
    var html = tableElement.innerHTML; 

    // Count <tr> 
    var count1 = html.match(/<tr/g).length; 

    // Count </tr> 
    var count2 = html.match(/<\/tr/g).length; 

    // Equals? 
    return count1 === count2; 

} 

然而，由於瀏覽器的天書，不匹配的標籤得到自動修正（即自動關閉）。因此，對於正在運行的頁面來驗證自己，它是不可能。這是一個概念證明：JS Bin。

說明：第二個表格有拼寫錯誤（打開標記而不是結束標記），但在兩種情況下該函數都返回true。如果檢查生成的HTML（可通過DOM訪問的HTML），可以看到瀏覽器自動更正了不匹配的標籤（還有一個空的表格行）。

---

幸運的是，還有另外一種方法。要獲得純瀏覽器（即未由瀏覽器修改）的HTML代碼，可以向當前頁面URL發出AJAX請求。是的，你閱讀正確 - 頁面再次加載。但不用擔心，這裏沒有遞歸和可能的堆棧溢出，因爲您不處理抓取的頁面。

以下JS代碼是：

var selfUrl = document.location.href; 

function checkHTML(html) { 

    // Count <tr> 
    var count1 = html.match(/<tr/g).length; 
    console.log(count1); 

    // Count </tr> 
    var count2 = html.match(/<\/tr/g).length; // </tr (do not remove this comment!) 
    console.log(count2); 

    // Equals? 
    return count1 === count2; 

} 

$.get(selfUrl, function(html) { 
    console.log(checkHTML(html)); 
}); 

但一個陷阱要小心處理。如果你在HTML中包含這個代碼（通常不鼓勵），那麼你不能刪除那個評論。原因如下：一個正則表達式包含<tr，而另一個正斜槓轉義並因此不包含</tr。而且，由於您獲取了整個HTML代碼（包括JS代碼），因此計數不匹配。即使如此，我在評論中增加了一個額外的</tr。

Answer 2

您的問題讓我想起了SAX Parser的想法，因爲HTML代碼顯然是XML的一種。只要元素屬性和內容一樣，SAX解析器通常會查看開始和結束標記。

前一段時間，我用從簡單SAX解析器庫：http://ejohn.org/blog/pure-javascript-html-parser/ 請訪問：http://ejohn.org/files/htmlparser.js

使用這個庫，你可以做到以下幾點：

$(document).ready(function(){ 
    var htmlString = $('#myTable').html(), 
     countStart = 0, 
     countEnd = 0; 

    HTMLParser(htmlString, { 
     start: function(tag, attrs, unary) { 
      countStart += 1; // you may add the if tag === 'tr' or else 
      console.log("start: " + tag); 
     }, 
     end: function(tag) { 
      countEnd += 1; // you may add the if tag === 'tr' or else 
      console.log("end: " + tag); 
     }, 
     chars: function(text) {}, 
     comment: function(text) {} 
    }); 
}); 

也有現代的節點 - 例如：https://github.com/isaacs/sax-js/blob/master/examples/example.js這可以用於相同的任務。