Làm cách nào để chuẩn hóa HTML trong JavaScript hoặc jQuery?

Thẻ có thể có nhiều thuộc tính. Thứ tự các thuộc tính xuất hiện trong mã không quan trọng. Ví dụ:

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

Làm cách nào để tôi có thể "bình thường hóa" HTML trong Javascript để thứ tự của các thuộc tính luôn giống nhau? Tôi không quan tâm thứ tự được chọn, miễn là nó luôn giống nhau.

CẬP NHẬT : mục tiêu ban đầu của tôi là làm cho 2 trang HTML khác nhau (trong JavaScript) dễ dàng hơn với những khác biệt nhỏ. Vì người dùng có thể sử dụng phần mềm khác nhau để chỉnh sửa mã nên thứ tự của các thuộc tính có thể thay đổi. Điều này làm cho sự khác biệt quá dài.

TRẢ LỜI : Vâng, đầu tiên cảm ơn vì tất cả các câu trả lời. Và CÓ, nó hoàn toàn có thể. Đây là cách tôi quản lý để làm điều đó. Đây là một bằng chứng về khái niệm, nó chắc chắn có thể được tối ưu hóa:

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

Điều tương tự cho phần tử thứ hai của khác biệt , $('#different'). Bây giờ $('#original').html()và $('#different').html()hiển thị mã HTML với các thuộc tính theo cùng một thứ tự.

JavaScript không thực sự thấy một trang web ở dạng HTML dựa trên văn bản, mà là một cấu trúc cây được gọi là DOM hoặc Mô hình đối tượng tài liệu. Thứ tự của các thuộc tính phần tử HTML trong DOM không được xác định (trên thực tế, như nhận xét của Svend, chúng thậm chí không phải là một phần của DOM), vì vậy ý ​​tưởng sắp xếp chúng tại thời điểm JavaScript chạy là không phù hợp.

Tôi chỉ có thể đoán những gì bạn đang cố gắng đạt được. Nếu bạn đang cố gắng làm điều này để cải thiện hiệu suất JavaScript / trang, thì hầu hết các trình kết xuất tài liệu HTML có lẽ đã nỗ lực rất nhiều vào việc tối ưu hóa quyền truy cập thuộc tính, vì vậy, bạn sẽ thu được rất ít.

Nếu bạn đang cố gắng sắp xếp các thuộc tính để làm cho việc nén gzip của các trang hiệu quả hơn khi chúng được gửi qua dây, hãy hiểu rằng JavaScript chạy sau thời điểm đó. Thay vào đó, bạn có thể muốn xem xét những thứ chạy phía máy chủ, mặc dù nó có thể rắc rối hơn mức đáng có.

Đưa HTML và phân tích cú pháp thành cấu trúc DOM. Sau đó, lấy cấu trúc DOM và viết nó trở lại HTML. Trong khi viết, hãy sắp xếp các thuộc tính bằng cách sử dụng bất kỳ sắp xếp ổn định nào. HTML của bạn bây giờ sẽ được chuẩn hóa theo các thuộc tính.

Đây là một cách chung để bình thường hóa mọi thứ. (phân tích cú pháp dữ liệu chưa chuẩn hóa, sau đó viết lại dữ liệu đó ở dạng chuẩn hóa).

Tôi không chắc tại sao bạn muốn Bình thường hóa HTML, nhưng bạn có nó. Dữ liệu là dữ liệu. ;-)

Đây là một bằng chứng về khái niệm, nó chắc chắn có thể được tối ưu hóa:

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

Điều tương tự cho phần tử thứ hai của khác biệt, $ ('# khác nhau'). Bây giờ $ ('# original'). Html () và $ ('# khác'). Html () hiển thị mã HTML với các thuộc tính theo cùng một thứ tự.

bạn có thể thử mở tab HTML trong firebug, các thuộc tính luôn theo thứ tự

Thực ra, tôi có thể nghĩ ra một vài lý do chính đáng. Một sẽ là so sánh để đối sánh danh tính và để sử dụng với các công cụ loại 'khác biệt', nơi khá khó chịu khi các dòng tương đương về ngữ nghĩa có thể được đánh dấu là "khác nhau".

Câu hỏi thực sự là "Tại sao trong Javascript"?

Câu hỏi này "có mùi" "Tôi có một vấn đề và tôi nghĩ tôi có câu trả lời ... nhưng tôi cũng có vấn đề với câu trả lời của mình."

Nếu OP giải thích lý do tại sao họ muốn làm điều này, cơ hội nhận được câu trả lời tốt của họ sẽ tăng lên đáng kể.

Câu hỏi "Cần gì cho cái này?" Trả lời: Nó làm cho mã dễ đọc hơn và dễ hiểu hơn.

Tại sao hầu hết giao diện người dùng đều tệ ... Nhiều lập trình viên không hiểu sự cần thiết của việc đơn giản hóa công việc của người dùng. Trong trường hợp này, công việc của người dùng là đọc và hiểu mã. Một lý do để đặt hàng các thuộc tính là vì con người phải gỡ lỗi và duy trì mã. Một danh sách có thứ tự, mà chương trình trở nên quen thuộc, giúp công việc của anh ta dễ dàng hơn. Anh ta có thể nhanh chóng tìm thấy thuộc tính hoặc nhận ra thuộc tính nào bị thiếu và thay đổi giá trị thuộc tính nhanh hơn.

Điều này chỉ quan trọng khi ai đó đang đọc nguồn, vì vậy đối với tôi đó là thuộc tính ngữ nghĩa trước, ít ngữ nghĩa hơn tiếp theo ...

Tất nhiên vẫn có ngoại lệ, nếu bạn có ví dụ: liên tiếp của <li>, tất cả đều có một thuộc tính trên mỗi thuộc tính và các thuộc tính khác chỉ trên một số, bạn có thể muốn đảm bảo các thuộc tính được chia sẻ đều ở đầu, tiếp theo là các thuộc tính riêng lẻ, ví dụ: .

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

(Ngay cả khi thuộc tính "b" hữu ích hơn về mặt ngữ nghĩa so với "a")

Bạn có được ý tưởng.

Tôi nghĩ thực sự có thể xảy ra nếu nội dung html được chuyển dưới dạng xml và được hiển thị qua xslt ... do đó, nội dung gốc của bạn trong XML có thể theo bất kỳ thứ tự nào bạn muốn.