JavaScript veya jQuery'de HTML nasıl normalleştirilir?

Etiketlerin birden çok özelliği olabilir. Özniteliklerin kodda görünme sırası önemli değildir. Örneğin:

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

HTML'yi Javascript'te nasıl "normalleştirebilirim", böylece özniteliklerin sırası her zaman aynı olur? Her zaman aynı olduğu sürece hangi sıranın seçildiği umrumda değil.

GÜNCELLEME : Asıl hedefim, küçük farklılıklar içeren (JavaScript'te) 2 HTML sayfasını ayırt etmeyi kolaylaştırmaktı. Kullanıcılar kodu düzenlemek için farklı yazılımlar kullanabileceğinden, özniteliklerin sırası değişebilir. Bu, farklılığı çok ayrıntılı hale getirir.

CEVAP : Öncelikle tüm cevaplar için teşekkürler. Ve EVET, mümkündür. İşte bunu nasıl başardığım. Bu bir kavram kanıtıdır, kesinlikle optimize edilebilir:

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);
    }
  }
});

Farkın ikinci öğesi için de aynı şey $('#different'),. Şimdi $('#original').html()ve $('#different').html()özniteliklere sahip HTML kodunu aynı sırayla gösterin.

JavaScript aslında metin tabanlı HTML biçiminde bir web sayfası değil, DOM veya Belge Nesne Modeli olarak bilinen bir ağaç yapısı olarak görür. DOM'daki HTML öğesi özelliklerinin sırası tanımlanmamıştır (aslında, Svend'in yorumlarında olduğu gibi bunlar DOM'un bir parçası bile değildirler), bu nedenle bunları JavaScript'in çalıştığı noktada sıralama fikri alakasızdır.

Ne başarmaya çalıştığını sadece tahmin edebilirim. Bunu JavaScript / sayfa performansını iyileştirmek için yapmaya çalışıyorsanız, HTML belge oluşturucularının çoğu, muhtemelen öznitelik erişimini optimize etmek için çok çaba sarf etti, bu yüzden orada kazanılacak çok az şey var.

Sayfaların gzip sıkıştırmasını kablo üzerinden gönderildiklerinde daha etkili hale getirmek için öznitelikleri sipariş etmeye çalışıyorsanız, JavaScript'in bu noktadan sonra çalıştığını anlayın. Bunun yerine, muhtemelen değerinden daha fazla sorun olsa da, sunucu tarafında çalışan şeylere bakmak isteyebilirsiniz.

HTML'yi alın ve bir DOM yapısına ayrıştırın. Sonra DOM yapısını alın ve bunu tekrar HTML'ye yazın. Yazarken, herhangi bir kararlı sıralama kullanarak nitelikleri sıralayın. HTML'niz artık özniteliklere göre normalleştirilecek.

Bu, işleri normalleştirmenin genel bir yoludur. (normalleştirilmemiş verileri ayrıştırın, ardından normalleştirilmiş biçimde yeniden yazın).

Neden HTML'yi Normalleştirmek isteyeceğinizden emin değilim, ama işte karşınızda. Veri veridir. ;-)

Bu bir kavram kanıtıdır, kesinlikle optimize edilebilir:

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);
    }
  }
 });

Farkın ikinci öğesi için aynı şey, $ ('# farklı'). Şimdi $ ['# orijinal']. Html () ve $ ('# farklı']. Html () aynı sıradaki özniteliklere sahip HTML kodunu gösterir.

Firebug'da HTML sekmesini açmayı deneyebilirsiniz, öznitelikler her zaman aynı sıradadır

Aslında birkaç iyi neden düşünebilirim. Bunlardan biri, kimlik eşleştirme ve semantik olarak eşdeğer satırların "farklı" olarak işaretlenmesinin oldukça can sıkıcı olduğu "diff" tipi araçlarla kullanım için karşılaştırma olabilir.

Asıl soru "Neden Javascript'te"?

Bu soru "bir sorunum var ve sanırım bir cevabım var ... ama cevabımla ilgili bir sorunum var" gibi "kokuyor".

OP bunu neden yapmak istediklerini açıklarsa, iyi bir yanıt alma şansı çarpıcı biçimde artar.

"Buna ne gerek var?" Cevap: Kodu daha okunaklı ve anlaşılır hale getirir.

Çoğu kullanıcı arayüzü neden berbat ... Birçok programcı, kullanıcıların işini basitleştirme ihtiyacını anlayamıyor. Bu durumda, kullanıcının işi kodu okumak ve anlamaktır. Öznitelikleri sipariş etmenin bir nedeni, kodda hata ayıklaması ve bakımı yapması gereken insanlar içindir. Programın aşina olduğu sıralı bir liste işini kolaylaştırır. Öznitelikleri daha hızlı bulabilir veya hangi özniteliklerin eksik olduğunu anlayabilir ve öznitelik değerlerini daha hızlı değiştirebilir.

Bu sadece biri kaynağı okurken önemlidir, bu yüzden benim için önce anlamsal nitelikler, sonra daha az anlamsal özellikler ...

Elbette istisnalar vardır, örneğin ardışık <li> 'leriniz varsa, hepsinde bir öznitelik varsa ve diğerlerinde yalnızca bazılarında, paylaşılanların hepsinin başlangıçta, ardından ayrı ayrı olduğundan emin olmak isteyebilirsiniz, örn. .

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

("B" özelliği anlamsal olarak "a" dan daha kullanışlı olsa bile)

Kaptın bu işi.

html içerikleri xml olarak aktarılıp xslt aracılığıyla işlenirse aslında mümkün olduğunu düşünüyorum ... bu nedenle XML'deki orijinal içeriğiniz istediğiniz sırada olabilir.