Bất kỳ ai cũng có một thuật toán khác cho HTML được hiển thị?

Question

Tôi quan tâm đến việc 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 sẽ là khác biệt sẽ cho thấy sự khác biệt của được hiển thị là HTML.

Để làm rõ, tôi muốn có thể thấy các khác biệt cạnh nhau là kết quả được hiển thị. Vì vậy, nếu tôi xóa một đoạn văn, chế độ xem cạnh nhau sẽ biết chính xác về không gian.

---

@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 một cái gì đó. Ý tưởng là nếu tôi sử dụng trình soạn thảo WYSIWYG cho nội dung HTML của mình, tôi không muốn chuyển sang HTML để thực hiện các khác biệt. Tôi muốn làm điều đó với hai trình soạn thảo WYSIWYG bên cạnh có thể. Hoặc ít nhất màn hình 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.

Answer 1

Có một mẹo 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 giải quyết được hoàn toàn vấn đề ban đầu, nhưng nó sẽ tạo ra sự khác biệt đáng kể về sự xuất hiện 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ẽ làm cho việc phân biệt theo chiều dọc của bạn trở nên rất khó khăn. Căn chỉnh theo chiều dọc là rất quan trọng để so sánh các khác biệt song song. Để cải thiện sự sắp xếp theo chiều dọc của một diff-side-side, bạn có thể chèn các phần tử HTML vô hình trong mỗi phiên bản của diff tại "checkpoints", nơi diff nên được canh 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 điểm kiểm tra cho đến khi các cạnh thẳng hàng theo chiều dọc.

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

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

Answer 2

Tôi tin rằng cách tốt nhất để làm điều này là render the HTML to an image và sau đó sử dụng một số diff tool that can compare images để phát hiện sự khác biệt.

Answer 3

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 không?

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

Answer 4

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

Answer 5

Đối với những khác biệt nhỏ hơn, bạn có thể thực hiện một văn bản bình thường, sau đó phân tích các phần bị thiếu hoặ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, bạn sẽ có một thời gian rất khó khăn làm điều này.

Ví dụ: làm cách nào bạn phát hiện và hiển thị, hình ảnh được căn trái (phần còn lại của một đoạn văn bản) đột nhiên trở thành căn phải?

Answer 6

Tôi đã cần một số thứ tương tự. Để có được HTML để xếp hàng sang một bên, bạn có thể sử dụng hai iFrames, nhưng sau đó bạn phải buộc cuộn chúng lại với nhau thông qua javascript khi bạn cuộn (nếu bạn cho phép cuộn).

Để xem sự khác biệt, tuy nhiên, bạn sẽ có nhiều khả năng 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ự, nơi khách hàng của tôi hài lòng khi thấy một hiển thị HTML nội dung duy nhất với các thay đổi theo dõi MS Word "- như đánh dấu.

HTH

Answer 7

Sử dụng văn bản khác sẽ phá vỡ 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 tuyệt vời cho một tập hợp con của HTML.

Answer 8

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

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

Answer 9

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 thuần văn bản của html, và sau đó là khác biệt.

Answer 10

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

http://prettydiff.com/

Answer 11

gì về DaisyDiff (Java và PHP vesions sẵn).

tính năng Sau đây là thật sự tốt đẹp:

• trình với HTML nặng hình thành có thể được tìm thấy "trong tự nhiên".
• Sự khác biệt là chuyên biệt hơn về HTML so với các khác biệt về cây XML. Thay đổi một phần của một nút văn bản sẽ không làm thay đổi toàn bộ nút.
• Ngoài sự khác biệt về hình ảnh mặc định, nguồn HTML có thể được phân biệt rõ ràng.
• 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.

Answer 12

Cuối tuần qua, tôi đã đăng dự án mới trên codeplex triển khai 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ẽ có một cái có sẵn 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ó here.

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