Có ai có một thuật toán khác cho HTML được hiển thị không? [đóng cửa]

Tôi muốn nhìn thấy một thuật toán khác biệt tốt, có thể trong Javascript, để hiển thị sự khác biệt song song của hai trang HTML. Ý tưởng là sự khác biệt sẽ cho thấy sự khác biệt của HTML được hiển thị .

Để làm rõ, tôi muốn có thể xem các điểm khác biệt cạnh nhau dưới dạng kết xuất đầu ra. Vì vậy, nếu tôi xóa một đoạn văn, chế độ xem song song sẽ biết cách sắp xếp mọi thứ một cách chính xác.

@Josh chính xác. Mặc dù có thể nó sẽ hiển thị văn bản đã xóa bằng màu đỏ hoặc gì đó. Ý tưởng là nếu tôi sử dụng trình chỉnh sửa WYSIWYG cho nội dung HTML của mình, tôi không muốn phải chuyển sang HTML để thực hiện các khác biệt. Tôi có thể muốn làm điều đó với hai biên tập viên WYSIWYG cạnh nhau. Hoặc ít nhất là hiển thị khác nhau song song trong một vấn đề thân thiện với người dùng cuối.

Có một thủ thuật hay khác mà bạn có thể sử dụng để cải thiện đáng kể giao diện của một khác biệt HTML được hiển thị. Mặc dù điều này không hoàn toàn giải quyết được vấn đề ban đầu, nhưng nó sẽ tạo ra sự khác biệt đáng kể về diện mạo của các khác biệt HTML được hiển thị của bạn.

HTML được hiển thị song song sẽ khiến cho sự khác biệt của bạn rất khó xếp hàng theo chiều dọc. Căn chỉnh theo chiều dọc là rất quan trọng để so sánh các chênh lệch cạnh nhau. Để cải thiện việc căn chỉnh theo chiều dọc của khác biệt cạnh nhau, bạn có thể chèn các phần tử HTML vô hình trong mỗi phiên bản của khác biệt tại "điểm kiểm tra" nơi khác biệt phải được căn chỉnh theo chiều dọc. Sau đó, bạn có thể sử dụng một chút JavaScript phía máy khách để thêm khoảng cách dọc xung quanh trạm kiểm soát cho đến khi các cạnh thẳng hàng theo chiều dọc.

Giải thích chi tiết hơn một chút:

Nếu bạn muốn sử dụng kỹ thuật này, hãy chạy thuật toán khác biệt của bạn và chèn một loạt các visibility:hidden <span>s hoặc các <div>s nhỏ vào bất cứ nơi nào các phiên bản cạnh nhau của bạn khớp với nhau, tùy theo sự khác biệt. Sau đó, chạy JavaScript để tìm từng điểm kiểm tra (và hàng xóm cạnh nhau của nó) và thêm khoảng cách theo chiều dọc vào điểm kiểm tra cao hơn (nông hơn) trên trang. Bây giờ khác biệt HTML được hiển thị của bạn sẽ được căn chỉnh theo chiều dọc cho đến điểm kiểm tra đó và bạn có thể tiếp tục sửa chữa căn chỉnh dọc xuống phần còn lại của trang cạnh nhau của mình.

Cuối tuần qua, tôi đã đăng một dự án mới trên codeplex thực hiện một thuật toán khác biệt HTML trong C #. Thuật toán ban đầu được viết bằng Ruby. Tôi hiểu rằng bạn đang tìm kiếm một triển khai JavaScript, có lẽ việc có sẵn một JavaScript trong C # với mã nguồn có thể hỗ trợ bạn chuyển thuật toán. Đây là liên kết nếu bạn quan tâm: htmldiff.codeplex.com . Bạn có thể đọc thêm về nó ở đây .

CẬP NHẬT: Thư viện này đã được chuyển sang GitHub .

Tôi đã kết thúc cần một cái gì đó tương tự trong một thời gian trở lại. Để làm cho HTML thẳng hàng với nhau, bạn có thể sử dụng hai iFrame, nhưng sau đó bạn phải liên kết việc cuộn của chúng với nhau thông qua javascript khi bạn cuộn (nếu bạn cho phép cuộn).

Tuy nhiên, để xem sự khác biệt, nhiều khả năng bạn sẽ muốn sử dụng thư viện của người khác. Tôi đã sử dụng DaisyDiff , một thư viện Java, cho một dự án tương tự trong đó khách hàng của tôi hài lòng khi thấy một HTML hiển thị nội dung duy nhất với đánh dấu giống như "theo dõi thay đổi" của MS Word.

HTH

Hãy xem xét sử dụng đầu ra của các liên kết hoặc lynx để hiển thị phiên bản html chỉ có văn bản và sau đó khác biệt.

Điều gì về DaisyDiff (phiên bản Java và PHP có sẵn).

Các tính năng sau thực sự rất hay:

• Hoạt động với HTML được định dạng sai có thể được tìm thấy "trong tự nhiên".
• Điểm khác biệt là HTML chuyên biệt hơn so với cây XML. Thay đổi một phần của nút văn bản sẽ không làm cho toàn bộ nút bị thay đổi.
• Ngoài sự khác biệt trực quan mặc định, nguồn HTML có thể được khác biệt một cách nhất quán.
• Cung cấp mô tả dễ hiểu về các thay đổi.
• GUI mặc định cho phép dễ dàng duyệt các sửa đổi thông qua các phím tắt và liên kết.

Vì vậy, bạn mong đợi

<font face="Arial">Hi Mom</font>

và

<span style="font-family:Arial;">Hi Mom</span>

được coi là giống nhau?

Đầu ra phụ thuộc rất nhiều vào Tác nhân người dùng. Giống như Ionut Anghelcovici gợi ý , hãy tạo một hình ảnh. Làm một cái cho mọi trình duyệt bạn quan tâm.

Sử dụng chế độ đánh dấu của Pretty Diff cho HTML. Nó được viết hoàn toàn bằng JavaScript.

http://prettydiff.com/

Nếu đó là XHTML (theo tôi là rất nhiều) thì Bộ công cụ vá lỗi Xml có giúp ích gì không? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Đối với những khác biệt nhỏ hơn, bạn có thể thực hiện khác biệt văn bản bình thường, sau đó phân tích các phần bị thiếu hoặc được chèn để xem cách giải quyết nó, nhưng đối với bất kỳ sự khác biệt lớn hơn nào, bạn sẽ gặp rất nhiều khó khăn khi thực hiện việc này.

Ví dụ: làm cách nào bạn có thể phát hiện và cho thấy rằng một hình ảnh được căn trái (nổi bên trái của một đoạn văn bản) đột nhiên trở nên căn phải?

Sử dụng một khác biệt văn bản sẽ phá vỡ trên các tài liệu không tầm thường. Tùy thuộc vào những gì bạn nghĩ là trực quan, các khác biệt XML có thể sẽ tạo ra các khác biệt không tốt cho văn bản có đánh dấu. AFAIK, DaisyDiff là thư viện duy nhất chuyên về HTML. Nó hoạt động tốt cho một tập hợp con của HTML.

Nếu bạn đang làm việc với Java và XHTML, XMLUnit cho phép bạn so sánh hai tài liệu XML thông qua lớp org.custommonkey.xmlunit.DetailedDiff :

So sánh và mô tả tất cả sự khác biệt giữa hai tài liệu XML. Việc so sánh tài liệu không dừng lại khi tìm thấy sự khác biệt không thể khôi phục đầu tiên, không giống như lớp Diff.

Tôi tin rằng một cách tốt để làm điều này là hiển thị HTML thành một hình ảnh và sau đó sử dụng một số công cụ khác biệt có thể so sánh các hình ảnh để phát hiện sự khác biệt.