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

差异的第二个元素也是如此$('#different').现在$('#original').html(),$('#different').html()以相同的顺序显示包含属性的HTML代码.

Answer 1

JavaScript并没有实际的基于文本的HTML的形式看到一个网页,而是被称为DOM,或文档对象模型的树形结构.HTML元素的顺序在DOM属性未定义(事实上,作为斯文的意见,他们不是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);
    }
  }
 });

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

Answer 4

您可以尝试在firebug中打开HTML选项卡,属性始终处于相同的顺序

Answer 5

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

真正的问题是"为什么在Javascript"？

这个问题"闻到""我有问题,我想我有答案......但我的答案也有问题."

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