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

【问题标题】：How to normalize HTML in JavaScript or jQuery?如何在 JavaScript 或 jQuery 中规范化 HTML？
【发布时间】：2011-04-27 20:19:11
【问题描述】：

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

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

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

更新：我最初的目标是更容易区分（在 JavaScript 中）有细微差别的 2 个 HTML 页面。因为用户可以使用不同的软件来编辑代码，所以属性的顺序可能会改变。这使得 diff 过于冗长。

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

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

【问题讨论】：

这个有什么需要？
@rahul：实际上有一个非常有趣的需求：它可以极大地提高页面的 gzip 压缩率。
啊，在 Javascript 中……压缩太多了。不知道那时需要什么。
@Julien：当你的 JavaScript 代码运行时，页面已经发送到客户端。我看不出它对压缩有什么帮助。
尝试执行 OP 要求的操作实际上是有效的。使用 WYSIWYG 编辑器驱动 wiki。我正在处理的项目正是这样做的，每次您编辑 wiki 时，编辑器都会颠倒属性的顺序，从而导致不必要的差异。我在保存之前在后端提交的 HTML 中按字母顺序对属性进行排序以避免差异；在提交之前可以很容易地在 javascript 中完成这种排序。

标签： javascript jquery html html-parsing

【解决方案1】：

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

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

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

【讨论】：

JavaScript 可以在服务器端运行。
属性不被视为文档树的一部分（自然使用排序）。因此，虽然 Attr 继承了 Node 接口，但 DOM Core 2 将这些字段指定为 null 属性 w3.org/TR/DOM-Level-2-Core/core.html#ID-637646024

【解决方案2】：

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

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

我不知道你为什么要规范化 HTML，但是你有它。数据就是数据。 ;-)

【讨论】：

你有代码示例吗？我尝试做类似的事情，但没有成功。

【解决方案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);
    }
  }
 });

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

【讨论】：

我认为如果您在 XML 中生成 html 内容然后使用 xslt 呈现它会更好。你肯定会得到更好的输出。

【解决方案4】：

你可以尝试在firebug中打开HTML标签，属性总是相同的顺序

【讨论】：

这本身并没有真正的帮助。这是因为它正在从 DOM 重新创建 HTML，但是这种情况发生时具有特定的属性迭代顺序（或 Firebug 手动对它们进行排序）。 Julien 可以利用这一点并使用相同的方法写出 HTML。

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

我认为您考虑这个问题的时间不够长；即使是对问题的有效解决方案也无法解决您在这里所说的问题，尽管它可能是正确的。
你为什么认为 OP 想要用 Javascript 来做这件事？可能考虑到服务器端（构建时间？）Javascript 解决方案，但不太可能有足够经验的人不会在 Stackoverflow 帖子中提及它。 OP 也有可能正在实现一个浏览器内的 HTML 编辑器，但这似乎也值得怀疑。

【解决方案7】：

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

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

，每个属性都有一个属性，而其他属性只有一些，您可能希望确保共享的都在开头，然后是单独的例如。

A

B

C

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

你明白了。

【讨论】：

【解决方案8】：

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

【讨论】：