如何在JavaScript或jQuery中标准化HTML？

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

<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代码。

JavaScript实际上看不到基于文本的HTML形式的网页，而是看到一种称为DOM或文档对象模型的树结构。未定义DOM中HTML元素属性的顺序（实际上，作为Svend注释，它们甚至不是DOM的一部分），因此在JavaScript运行时对它们进行排序的想法无关紧要。

我只能猜测您要达到的目标。如果您要尝试这样做以提高JavaScript /页面性能，则大多数HTML文档渲染器可能已经在优化属性访问上付出了很大的努力，因此在这里几乎没有收获。

如果您要对属性进行排序，以使其在通过网络发送时更有效地进行页面的gzip压缩，请了解JavaScript在该时间点之后运行。取而代之的是，您可能希望查看运行在服务器端的内容，尽管这可能比其价值更大。

使用HTML并将其解析为DOM结构。然后采用DOM结构，并将其写回到HTML。在编写时，请使用任何稳定的排序对属性进行排序。您的HTML现在将根据属性进行规范化。

这是规范事物的一般方法。（解析非规范化数据，然后以规范化形式写回）。

我不确定为什么要标准化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);
    }
  }
 });

差异的第二个元素$（'＃different'）也是如此。现在，$（'＃original'）。html（）和$（'＃different'）。html（）显示具有相同顺序属性的HTML代码。

您可以尝试在Firebug中打开HTML标签，属性始终按相同顺序

实际上，我可以想到一些很好的理由。一种可能是身份匹配和与“ diff”类型工具一起使用的比较，这在语义上等效的行可以被标记为“不同”是很烦人的。

真正的问题是“为什么要使用Javascript”？

“我有问题，我想我有一个答案……但是我的问题也有一个问题”使这个问题“闻起来”。

如果OP可以解释为什么要这样做，那么他们获得良好答案的机会就会大大增加。

问题“这需要什么？” 答：它使代码更具可读性且更易于理解。

为什么大多数UI很烂...许多程序员无法理解简化用户工作的需求。在这种情况下，用户的工作就是阅读和理解代码。排序属性的原因之一是必须调试和维护代码的人员。该程序变得熟悉的有序列表使他的工作更加轻松。他可以更快地找到属性，或了解缺少哪些属性，并更快地更改属性值。

这仅在某人正在阅读源代码时才重要，因此对我而言，它首先是语义属性，其次是语义属性...

当然，也有例外，例如，如果您有连续的<li>，所有的都在一个属性上，而另一个仅在某些属性上，则可能要确保共享的属性全部在开头，然后是各个属性，例如。

<li a =“ x”> A </ li>
<li a =“ y” b =“ t”> B </ li>
<li a =“ z”> C </ li>

（即使“ b”属性在语义上比“ a”更有用）

你明白了。

我认为，实际上有可能，如果html内容作为xml传递并通过xslt呈现...因此，XML的原始内容可以按照您想要的任何顺序排列。