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;

}

然而，由于浏览器的 mumbo-jumbo ，不匹配的标签会自动更正（即自动关闭）。因此，正在运行的页面验证自身不可能。这是一个概念证明：JS Bin。

说明：第二个表有一个拼写错误（开始标记而不是结束标记），但在两种情况下该函数都返回true。如果检查生成的HTML（可通过DOM访问的HTML），可以看到浏览器自动更正了不匹配的标记（还有一个空表行）。

幸运的是，还有另一种方式。要获得纯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 Parser通常会查看开始和结束标记，只要元素属性和内容。

前一段时间，我使用过简单的SAX Parser库：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，可用于同一任务。

JQuery计数表行

2 个答案: