วิธีทำให้ HTML ปกติใน JavaScript หรือ jQuery

แท็กสามารถมีหลายแอตทริบิวต์ ลำดับที่แอตทริบิวต์ปรากฏในโค้ดไม่สำคัญ ตัวอย่างเช่น:

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

ฉันจะ "ทำให้ HTML เป็นปกติ" ใน Javascript ได้อย่างไรดังนั้นลำดับของแอตทริบิวต์จึงเหมือนกันเสมอ ฉันไม่สนใจว่าจะเลือกคำสั่งไหนตราบใดที่ยังคงเหมือนเดิม

UPDATE : เป้าหมายเดิมของฉันคือทำให้หน้า HTML 2 หน้าแตกต่างกัน (ใน JavaScript) ได้ง่ายขึ้นโดยมีความแตกต่างเล็กน้อย เนื่องจากผู้ใช้สามารถใช้ซอฟต์แวร์อื่นเพื่อแก้ไขโค้ดลำดับของแอตทริบิวต์จึงอาจเปลี่ยนแปลงได้ สิ่งนี้ทำให้ความแตกต่างมากเกินไป

คำตอบ : ก่อนอื่นขอขอบคุณสำหรับคำตอบทั้งหมด และใช่มันเป็นไปได้ นี่คือวิธีที่ฉันจัดการได้ นี่เป็นข้อพิสูจน์ของแนวคิดซึ่งสามารถปรับให้เหมาะสมได้อย่างแน่นอน:

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 ไม่เห็นหน้าเว็บในรูปแบบของ HTML แบบข้อความ แต่เป็นโครงสร้างแบบต้นไม้ที่เรียกว่า DOM หรือ Document Object Model ไม่ได้กำหนดลำดับของแอตทริบิวต์องค์ประกอบ HTML ใน DOM (อันที่จริงแล้วเนื่องจากความคิดเห็นของ Svend พวกเขาไม่ได้เป็นส่วนหนึ่งของ DOM ด้วยซ้ำ) ดังนั้นแนวคิดในการจัดเรียงตามจุดที่ JavaScript ทำงานจึงไม่เกี่ยวข้อง

ฉันเดาได้แค่ว่าคุณพยายามบรรลุเป้าหมายอะไร หากคุณกำลังพยายามทำสิ่งนี้เพื่อปรับปรุงประสิทธิภาพของ JavaScript / เพจผู้แสดงเอกสาร HTML ส่วนใหญ่น่าจะใช้ความพยายามอย่างมากในการเพิ่มประสิทธิภาพการเข้าถึงแอตทริบิวต์ดังนั้นจึงมีเพียงเล็กน้อยที่จะได้รับ

หากคุณกำลังพยายามจัดลำดับแอตทริบิวต์เพื่อให้การบีบอัด gzip ของหน้าเว็บมีประสิทธิภาพมากขึ้นเมื่อส่งผ่านสายให้เข้าใจว่า JavaScript ทำงานหลังจากช่วงเวลานั้น แต่คุณอาจต้องการดูสิ่งต่างๆที่ทำงานฝั่งเซิร์ฟเวอร์แทนแม้ว่ามันอาจจะมีปัญหามากกว่าที่ควร

ใช้ HTML และแยกวิเคราะห์เป็นโครงสร้าง DOM จากนั้นนำโครงสร้าง DOM และเขียนกลับเป็น HTML ในขณะที่เขียนให้จัดเรียงแอตทริบิวต์โดยใช้การจัดเรียงที่มั่นคง ตอนนี้ HTML ของคุณจะถูกทำให้เป็นมาตรฐานโดยคำนึงถึงคุณลักษณะ

นี่เป็นวิธีทั่วไปในการทำให้สิ่งต่างๆเป็นปกติ (แยกวิเคราะห์ข้อมูลที่ไม่ได้ทำให้เป็นมาตรฐานแล้วเขียนกลับออกมาในรูปแบบปกติ)

ฉันไม่แน่ใจว่าทำไมคุณถึงต้องการ Normalize 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 คือ $ ('# different') ตอนนี้ $ ('# original'). html () และ $ ('# different'). html () แสดงโค้ด HTML ที่มีแอตทริบิวต์ในลำดับเดียวกัน

คุณสามารถลองเปิดแท็บ HTML ใน firebug แอตทริบิวต์จะอยู่ในลำดับเดียวกันเสมอ

ที่จริงฉันคิดเหตุผลดีๆได้ไม่กี่อย่าง หนึ่งจะเป็นการเปรียบเทียบสำหรับการจับคู่ข้อมูลประจำตัวและสำหรับการใช้กับเครื่องมือประเภท 'diff' ซึ่งค่อนข้างน่ารำคาญที่เส้นที่เทียบเท่ากันทางความหมายสามารถทำเครื่องหมายว่า "ต่างกัน" ได้

คำถามที่แท้จริงคือ "Why in Javascript"?

คำถามนี้ "มีกลิ่น" ของ "ฉันมีปัญหาและฉันคิดว่าฉันมีคำตอบ ... แต่ฉันก็มีปัญหากับคำตอบเช่นกัน"

หาก OP จะอธิบายว่าทำไมพวกเขาถึงต้องการทำเช่นนี้โอกาสที่พวกเขาจะได้รับคำตอบที่ดีจะเพิ่มขึ้นอย่างมาก

คำถาม "ต้องการสิ่งนี้คืออะไร" คำตอบ: ทำให้โค้ดอ่านง่ายและเข้าใจง่ายขึ้น

ทำไม UI ส่วนใหญ่ถึงห่วย ... โปรแกรมเมอร์หลายคนไม่เข้าใจถึงความจำเป็นในการทำให้งานของผู้ใช้ง่ายขึ้น ในกรณีนี้งานของผู้ใช้กำลังอ่านและทำความเข้าใจโค้ด เหตุผลหนึ่งในการสั่งซื้อแอตทริบิวต์คือสำหรับมนุษย์ที่ต้องแก้จุดบกพร่องและรักษารหัส รายการสั่งซื้อซึ่งโปรแกรมคุ้นเคยทำให้งานของเขาง่ายขึ้น เขาสามารถค้นหาแอตทริบิวต์ได้เร็วขึ้นหรือรู้ว่าแอตทริบิวต์ใดหายไปและเปลี่ยนค่าคุณลักษณะได้รวดเร็วขึ้น

สิ่งนี้มีความสำคัญเฉพาะเมื่อมีคนอ่านแหล่งที่มาดังนั้นสำหรับฉันแล้วมันเป็นแอตทริบิวต์ทางความหมายก่อนอื่นความหมายน้อยถัดไป ...

มีข้อยกเว้นแน่นอนหากคุณมีตัวอย่างติดต่อกันของ <li> ทั้งหมดมีแอตทริบิวต์เดียวในแต่ละรายการและอื่น ๆ เฉพาะในบางรายการเท่านั้นคุณอาจต้องการตรวจสอบให้แน่ใจว่ารายการที่ใช้ร่วมกันทั้งหมดอยู่ที่จุดเริ่มต้นตามด้วยแต่ละรายการเช่น .

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

(แม้ว่าแอตทริบิวต์ "b" จะมีประโยชน์ทางความหมายมากกว่า "a")

คุณจะได้รับความคิด

เป็นไปได้จริงฉันคิดว่าถ้าเนื้อหา html ถูกส่งผ่านเป็น xml และแสดงผลผ่าน xslt ... ดังนั้นเนื้อหาต้นฉบับของคุณใน XML สามารถอยู่ในลำดับใดก็ได้ที่คุณต้องการ