1. ホーム
  2. javascript

[解決済み] JavaScriptやjQueryでHTMLを正規化する方法とは?

2023-06-15 20:43:50

質問

タグは複数の属性を持つことができます。属性がコードに現れる順序は重要ではありません。例えば

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

JavascriptでHTMLを正規化し、属性の順序を常に同じにするにはどうしたらよいでしょうか。私は、常に同じである限り、どの順序が選ばれても気にしません。

UPDATE 私の当初の目的は、わずかな違いのある2つのHTMLページの差分を(JavaScriptで)簡単に作成することでした。ユーザーはコードを編集するために異なるソフトウェアを使用することができるので、属性の順序が変わる可能性があります。これでは、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);
    }
  }
});

diffの2番目の要素も同じです。 $('#different') . では $('#original').html()$('#different').html() は、同じ順序で属性を持つ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);
    }
  }
 });

diffの2番目の要素である$('#different')でも同じことが言えます。これで $('#original').html() と $('#different').html() は同じ順序で属性を持つ HTML コードを表示するようになりました。