如何在JavaScript或jQuery中规范HTML?

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

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

我怎样才能“正常化”在JavaScript中的HTML,所以属性的顺序总是相同的? 我不在乎select哪个订单,只要它总是一样的。

更新 :我最初的目标是使它更容易区分(在JavaScript中)2个HTML页面,略有不同。 由于用户可以使用不同的软件来编辑代码,因此属性的顺序可能会改变。 这使差异太冗长。

回答 :那么,首先要感谢所有的答案。 是的,这是可能的。 这是我设法做到的。 这是一个概念的certificate,它当然可以优化:

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

JavaScript实际上并没有以基于文本的HTMLforms看到一个网页,而是作为一个称为DOM的树形结构或文档对象模型。 没有定义DOM中HTML元素属性的顺序(事实上,正如Svend所说,它们甚至不是DOM的一部分),所以在JavaScript运行的地方对它们进行sorting的想法是不相关的。

我只能猜测你想达到什么目的。 如果您正在尝试这样做以提高JavaScript /页面的性能,大多数HTML文档渲染器已经大概花费了大量的精力来优化属性访问,所以在这里没有什么收获。

如果您正在尝试订购属性以使页面的gzip压缩更有效,那么请了解JavaScript在该时间点之后运行。 相反,你可能想看看运行服务器端的东西,尽pipe它可能比它的价值更麻烦。

把HTML和parsing成一个DOM结构。 然后采取DOM结构,并写回到HTML。 在编写时,使用任何稳定的sorting对属性进行sorting。 您的HTML现在将被归一化为属性。

这是规范事物的一般方法。 (parsing非规范化的数据,然后以规范化的forms写回)。

我不知道为什么你想要规范化HTML,但是你有它。 数据是数据。 😉

这是一个概念的certificate,它当然可以优化:

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

你可以尝试在萤火虫中打开HTML标签,属性总是以相同的顺序

其实,我可以想到几个很好的理由。 一个是比较身份匹配,并用于“差异”types的工具,这是相当恼人的语义等值线可以被标记为“不同”。

真正的问题是“为什么在Javascript中”?

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

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

“这需要什么?” 答案:它使代码更易读,更容易理解。

为什么大多数用户界面很糟糕……许多程序员无法理解简化用户工作的需求。 在这种情况下,用户的工作是阅读和理解代码。 sorting属性的一个原因是必须debugging和维护代码的人。 程序熟悉的有序列表使他的工作更容易。 他可以更快速地find属性,或者实现哪些属性丢失,并更快地更改属性值。

这个只在有人阅读源代码时才有意义,所以对我来说首先是语义属性,接下来是较less的语义属性。

当然也有例外,例如,如果你有连续的<li>,每个都有一个属性,而其他的只有一个属性,你可能想要确保共享的都在开始,然后是个别的,例如。

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

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

你明白了。

实际上,我认为,如果html内容以xmlforms传递并通过xslt呈现,那么XML中的原始内容可以按您想要的任何顺序排列。