如何在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);
    }
  }
});

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);
    }
  }
 });

函数排序\u属性（a、b）{
如果（a.name==b.name）{
返回0；
}
返回值（a.name1）{
var attributes=this.attributes；
var列表=[]；
对于（变量i=0；i

---

对于diff的第二个元素，

$（“#不同”）

也是这样。现在

$（'#original'）.html（）

和

$（'#different'）.html（）

以相同的顺序显示具有属性的html代码。

您可以尝试在firebug中打开html选项卡，属性总是以相同的顺序。

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

我只能猜测你想达到什么目的。如果您试图这样做来提高JavaScript/页面性能，那么大多数HTML文档呈现器可能已经在优化属性访问方面投入了大量精力，因此几乎没有什么收获

---

如果您试图对属性进行排序，以使通过网络发送的页面的gzip压缩更有效，请理解JavaScript在该时间点之后运行。相反，您可能希望查看运行服务器端的内容，尽管这可能会带来更多麻烦。

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

这是使事情正常化的一般方法。（解析非规范化数据，然后以规范化形式将其写回）

---

我不知道你为什么想规范化HTML，但你已经做到了。数据就是数据。；-）

问题“这有什么必要？” 答：它使代码更可读，更容易理解

为什么大多数用户界面都很糟糕。。。许多程序员无法理解简化用户工作的必要性。在这种情况下，用户的任务是阅读和理解代码。

---

对属性进行排序的一个原因是为了调试和维护代码的人员。程序熟悉的有序列表使他的工作更容易。他可以更快地找到属性，或者意识到缺少哪些属性，并更快地更改属性值

这只在有人阅读源代码时才重要，所以对我来说，首先是语义属性，其次是语义属性

当然也有例外，例如，如果您有连续的

，每个属性上都有一个属性，而其他属性仅在某些属性上，那么您可能希望确保共享的属性都在开始时，然后是单独的属性，例如

a

b

C

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

---

你明白了。

事实上，我可以想出一些好的理由。一种是身份匹配的比较，以及与“diff”类型的工具一起使用，在这些工具中，语义等价的行可以标记为“different”是非常恼人的

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

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

---

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

这是一个概念证明，当然可以优化：

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);
    }
  }
});

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);
    }
  }
 });

函数排序\u属性（a、b）{
如果（a.name==b.name）{
返回0；
}
返回值（a.name1）{
var attributes=this.attributes；
var列表=[]；
对于（变量i=0；i

---

diff的第二个元素$（“#different”）也是如此。现在$（'#original'）.html（）和$（'#different'）.html（）以相同的顺序显示带有属性的html代码。

我认为，如果html内容以xml形式传递并通过xslt呈现，实际上是可能的。。。因此，XML中的原始内容可以按您想要的顺序排列。

这有什么必要？@rahul:实际上，这有一个非常有趣的需要：它可以极大地提高页面的gzip压缩。啊，在Javascript中。。。压缩就到此为止。不知道需要什么。@Julien:等你的Jav