javascript - 如何在 JavaScript 或 jQuery 中规范化 HTML？

Question

标签可以有多个属性。属性在代码中出现的顺序无关紧要。例如:

<a href="#" title="#">
<a title="#" href="#">

如何在 Javascript 中“规范化”HTML，使属性的顺序始终相同？我不在乎选择哪个顺序，只要它始终相同即可。

更新:我最初的目标是更容易区分(在 JavaScript 中)2 个略有不同的 HTML 页面。因为用户可以使用不同的软件来编辑代码，所以属性的顺序可能会发生变化。这使得差异过于冗长。

回答:好的，首先感谢您的所有回答。是的，这是可能的。这是我设法做到的。这是一个概念证明，它当然可以优化:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
}

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

    list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

    for(var i = 0; i < list.length; i++) {
      this.setAttribute(list[i].name, list[i].value);
    }
  }
});

diff 的第二个元素 $('#different') 也是如此。现在 $('#original').html() 和 $('#different').html() 以相同的顺序显示具有属性的 HTML 代码。

Answer 1

JavaScript 实际上并没有看到基于文本的 HTML 形式的网页，而是看到了一种称为 DOM 或文档对象模型的树结构。 DOM 中 HTML 元素属性的顺序没有定义(事实上，正如 Svend 评论的那样，它们甚至不是 DOM 的一部分)，因此在 JavaScript 运行时对它们进行排序的想法是无关紧要的。

我只能猜测您要实现的目标。如果您试图通过这样做来提高 JavaScript/页面性能，大多数 HTML 文档呈现器可能已经在优化属性访问方面付出了很多努力，因此收效甚微。

如果您尝试对属性进行排序以在通过网络发送页面时使页面的 gzip 压缩更有效，请了解 JavaScript 在该时间点之后运行。相反，您可能想看看在服务器端运行的东西，尽管它可能比它的值(value)更麻烦。