Question

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

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

如何在Javascript中“规范化”HTML，因此属性的顺序始终相同？我不关心选择哪个顺序，只要它总是相同的。

更新：我最初的目标是让两个HTML页面更容易区分（在JavaScript中），但略有不同。由于用户可以使用不同的软件来编辑代码，因此属性的顺序可能会发生变化。这使得差异太冗长了。

答案：首先，感谢所有答案。是的，这是可能的。这就是我成功的方法。这是一个概念证明，它当然可以优化：

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代码的属性顺序相同。

Answer 1

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

我只能猜到你想要达到的目标。如果您正在尝试这样做以提高JavaScript /页面性能，那么大多数HTML文档渲染器可能已经花费了大量精力来优化属性访问，因此在那里几乎没有什么可以获得的。

如果您尝试订购属性以使页面的gzip压缩在通过网络发送时更有效，请了解JavaScript在该时间点之后运行。相反，您可能希望查看运行服务器端的内容，尽管它可能比它的价值更麻烦。

Answer 2

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

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

我不确定你为什么要标准化HTML，但是你有它。数据就是数据。 ; - ）

Answer 3

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

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

Answer 4

您可以尝试在firebug中打开HTML标签，属性始终处于相同的顺序

Answer 5

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

真正的问题是“为何使用Javascript”？

这个问题“闻到”“我有问题，我想我有答案......但我的答案也有问题。”

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

Answer 6

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

为什么大多数用户界面很糟糕......很多程序员都不理解简化用户工作的必要性。在这种情况下，用户工作是阅读和理解代码。订购属性的一个原因是必须调试和维护代码的人。程序熟悉的有序列表使他的工作更容易。他可以更快地找到属性，或者意识到缺少哪些属性，并且可以更快地更改属性值。

Answer 7

这只有在有人阅读源代码时才有意义，所以对我来说，它首先是语义属性，接下来是语义属性较少......

当然也有例外情况，如果你有连续的＆lt; li＆gt;'s，每个都有一个属性而其他只有一些属性，你可能想要确保共享的一个都在开头，然后是个别的，例如

＆lt; li a =“x”＆gt; A＆lt; / li＆gt;
＆lt; li a =“y”b =“t”＆gt; B＆lt; / li＆gt;
＆lt; li a =“z”＆gt; C＆lt; / li＆gt;

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

你明白了。

Answer 8

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

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

8 个答案: