Đề xuất về cách xây dựng công cụ Diff HTML?

Question

Trong this post Tôi hỏi nếu có bất kỳ công cụ nào so sánh cấu trúc (không phải nội dung thực tế) của 2 trang HTML. Tôi hỏi vì tôi nhận được các mẫu HTML từ các nhà thiết kế của chúng tôi và thường xuyên bỏ lỡ các thay đổi định dạng nhỏ trong việc triển khai của tôi. Tôi sau đó lãng phí một vài giờ của thời gian thiết kế sàng lọc thông qua các trang của tôi để tìm những sai lầm của tôi.

Chuỗi cung cấp một số đề xuất tốt, nhưng không có gì phù hợp với hóa đơn. "Được rồi, rồi", tôi nghĩ, "Tôi sẽ tự mình quây rầy một mình. Tôi là một nhà phát triển nửa chừng, đúng không?".

Vâng, một khi tôi bắt đầu nghĩ về nó, tôi không thể tìm ra cách để đi về nó. Tôi có thể quay ra một trang web hướng dữ liệu một cách dễ dàng, hoặc thực hiện CMS, hoặc ném tài liệu vào và ra khỏi BizTalk cả ngày. Không thể bắt đầu tìm ra cách so sánh tài liệu HTML.

Vâng, chắc chắn, tôi phải đọc DOM và lặp qua các nút. Tôi phải lập bản đồ cấu trúc cho một số cấu trúc dữ liệu (như thế nào ??), và sau đó so sánh chúng (như thế nào ??). Đó là một nhiệm vụ phát triển như tôi chưa từng thử.

Vì vậy, bây giờ tôi đã xác định được điểm yếu trong kiến ​​thức của mình, tôi thậm chí còn khó khăn hơn để tìm ra điều này. Bất kỳ đề xuất nào về cách bắt đầu?

làm rõ: nội dung thực tế không phải là những gì tôi muốn so sánh - những người sáng tạo điền vào các trang của họ với lorem ipsum và tôi sử dụng nội dung thực. Thay vào đó, tôi muốn so sánh cấu trúc:

 
<div class="foo">lorem ipsum<div>

là khác nhau mà

 

<div class="foo">
<p>lorem ipsum<p>
<div>

Answer 1

mở từng trang trong trình duyệt và lưu chúng thành nhiều file .htm. So sánh hai bằng cách sử dụng windiff.

Answer 2

@Mike - so sánh mọi thứ, bao gồm nội dung của trang, không muốn áp phích gốc muốn.

Giả sử bạn có quyền truy cập vào DOM của trình duyệt (bằng cách viết plugin Firefox/IE hoặc bất kỳ thứ gì), tôi có thể đặt tất cả các phần tử HTML vào một cây, sau đó so sánh hai cây. Nếu tên thẻ khác, thì nút sẽ khác. Bạn có thể muốn dừng liệt kê tại một thời điểm nhất định (có thể bạn không quan tâm đến khoảng thời gian, đậm, nghiêng, v.v. - có thể chỉ lo lắng về div?), Vì một số thẻ thực sự là nội dung chứ không phải cấu trúc, của trang.

Answer 3

DOM là cấu trúc dữ liệu - đó là một cây.

Answer 4

Xem điều này previous post and accompanying answers.

Answer 5

Tôi không biết bất kỳ công cụ nhưng tôi biết có một cách đơn giản để làm điều này:

• Thứ nhất, sử dụng một công cụ biểu thức chính quy để lột tất cả các văn bản trong tập tin HTML của bạn. Bạn có thể sử dụng cụm từ thông dụng này để tìm kiếm văn bản (?<=^|>)[^><]+?(?=<|$) và thay thế chúng bằng một chuỗi trống (""), tức là xóa tất cả văn bản. Sau bước này, bạn sẽ có tất cả các thẻ đánh dấu HTML. Có rất nhiều công cụ biểu thức thông thường miễn phí trên mạng.
• Sau đó, bạn lặp lại bước đầu tiên cho tệp HTML gốc.
• Cuối cùng, bạn sử dụng công cụ khác để so sánh hai bộ đánh dấu HTML. Điều này sẽ hiển thị những gì còn thiếu giữa một bộ và một.

Answer 6

Run cả tập tin thông qua kịch bản Perl sau, sau đó sử dụng -iw diff để làm một, khoảng trắng phớt lờ diff case-insensitive.

#! /usr/bin/perl -w 

use strict; 

undef $/; 

my $html = <STDIN>; 

while ($html =~ /\S/) { 
    if ($html =~ s/^\s*<//) { 
    $html =~ s/^(.*?)>// or die "malformed HTML"; 
    print "<$1>\n"; 
    } else { 
    $html =~ s/^([^<]+)//; 
    print "(text)\n"; 
    } 
} 

Answer 7

Đây là một khởi đầu tuyệt vời. Một vài chi tiết làm rõ/bình luận:

• tôi có lẽ không quan tâm đến ID, vì .net sẽ mangle họ
• một số cấu trúc sẽ được trong một repeater hoặc điều khiển khác như vậy, vì vậy tôi có thể kết thúc có nhiều hoặc ít phần tử lặp lại

suy nghĩ thêm: Tôi nghĩ rằng một khởi đầu tốt sẽ là giả định html tuân thủ XHTML. Sau đó tôi có thể phỏng đoán lược đồ (sử dụng các phương thức .net XmlSchemaInference mới), rồi phân biệt lược đồ. Sau đó tôi có thể xem xét sự khác biệt và xem xét liệu chúng có quan trọng hay không.

Answer 8

Nếu tôi là Tacke vấn đề này tôi sẽ làm điều này:

1. Kế hoạch đối với một số loại của một DOM cho các trang html. bắt đầu với trọng lượng nhẹ và sau đó thêm nhiều hơn nếu cần. Tôi sẽ sử dụng mẫu tổng hợp cho cấu trúc dữ liệu. tức là mọi phần tử đều có bộ sưu tập trẻ em thuộc loại lớp cơ sở.
2. Tạo trình phân tích cú pháp để phân tích cú pháp các trang html.
3. Sử dụng trình phân tích cú pháp tải phần tử html vào DOM.
4. Sau khi các trang được tải lên DOM, bạn có ảnh chụp nhanh về cấu trúc trang html của bạn.
5. Tiếp tục lặp qua từng phần tử ở cả hai bên cho đến khi kết thúc DOM. Bạn sẽ tìm thấy sự khác biệt trong cấu trúc, khi bạn nhấn một loại phần tử không khớp.

Trong ví dụ của bạn, bạn sẽ chỉ có đối tượng phần tử div được tải trên một mặt, mặt khác bạn sẽ có đối tượng phần tử div được tải với 1 phần tử con của phần tử đoạn văn bản. kích hoạt trình lặp của bạn, trước tiên bạn sẽ so khớp phần tử div, trình lặp thứ hai bạn sẽ khớp với đoạn không có gì. Bạn đã có sự khác biệt về cấu trúc của bạn.

Answer 9

Tôi nghĩ rằng một số đề xuất ở trên không tính đến việc có các thẻ khác trong HTML giữa hai trang sẽ khác biệt về mặt văn bản, nhưng đánh dấu HTML kết quả có chức năng tương đương. Danh sách Danimal kiểm soát ID làm ví dụ.

Hai đánh dấu đây là functionlly giống hệt nhau, nhưng sẽ hiển thị như nhau nếu bạn chỉ đơn giản là so tags:

<div id="ctl00_TopNavHome_DivHeader" class="header4">foo</div> 
<div class="header4">foo</div> 

tôi sẽ đề nghị Danimal viết một bản dịch HTML trông cho các thẻ HTML và chuyển đổi cả tài liệu vào một phiên bản đơn giản của cả hai loại bỏ thẻ ID và bất kỳ thẻ nào khác mà bạn chỉ định là không liên quan. Đây có thể là một công việc đang diễn ra, khi bạn bỏ qua các thuộc tính/thẻ nhất định và sau đó chạy vào các thuộc tính mới mà bạn cũng muốn bỏ qua.

Tuy nhiên, tôi thích ý tưởng sử dụng XmlSchemaInterface để đun sôi nó xuống lược đồ XML, sau đó sử dụng một công cụ khác để hiểu các quy tắc XML.

Answer 10

Đề xuất của tôi chỉ là cách cơ bản để thực hiện ... Tất nhiên để giải quyết vấn đề bạn đã đề cập đến các quy tắc bổ sung phải được áp dụng tại đây ...Trong trường hợp của bạn, chúng tôi có phần tử div phù hợp và sau đó áp dụng các thuộc tính phù hợp với thuộc tính/thuộc tính và những gì không ...

Thành thật mà nói, có rất nhiều quy tắc phức tạp cần được áp dụng để so sánh, và nó không chỉ là một yếu tố kết hợp đơn giản với một yếu tố khác. Ví dụ điều gì sẽ xảy ra nếu bạn có bản sao. ví dụ: 1 phần tử div ở một bên và phần tử 2 div ở phía bên kia. Làm thế nào bạn sẽ phù hợp với các yếu tố div phù hợp với nhau?

Có rất nhiều vấn đề phức tạp khác mà bạn sẽ tìm thấy trong từ so sánh. Im nói dựa trên kinh nghiệm (một phần công việc của tôi là để chờ đợi công cụ so sánh văn bản công ty của tôi).

Answer 11

Xem http://www.semdesigns.com/Products/SmartDifferencer/index.html cho một công cụ được tham số hóa bằng ngữ pháp langauge và tạo các vùng đồng bằng về yếu tố ngôn ngữ (số nhận dạng, biểu thức, câu lệnh, khối, phương pháp, ...) được chèn, xóa, di chuyển, thay thế hoặc có số nhận dạng thay thế nó một cách nhất quán. Công cụ này bỏ qua định dạng lại khoảng trắng (ví dụ: các dòng hoặc bố cục khác nhau) và các giá trị không thể phân biệt ngữ nghĩa (ví dụ: nó biết rằng 0x0F và 15 có cùng giá trị). Điều này có thể được áp dụng cho HTML bằng cách sử dụng trình phân tích cú pháp HTML.

EDIT: 9/12/2009. Chúng tôi đã xây dựng một công cụ SmartDiff thử nghiệm bằng cách sử dụng trình chỉnh sửa HTML.

Answer 12

Nếu tôi đã làm điều này, đầu tiên tôi sẽ học HTML. (^ - ^) Sau đó, tôi sẽ xây dựng một công cụ để loại bỏ tất cả các nội dung thực tế và sau đó lưu nó như là một tập tin để nó có thể được đường ống thông qua WinDiff (hoặc công cụ hợp nhất khác).

Answer 13

Hãy nhìn xa hơn so sánh. Nó có một tính năng so sánh XML có thể giúp bạn.

Answer 14

Bạn cũng có thể phải xem xét rằng 'nội dung' có thể chứa thêm đánh dấu để có thể đánh giá mọi thứ trong một số yếu tố nhất định (như <div> s với các ID hoặc lớp nhất định) trước khi bạn so sánh. Ví dụ:

<div id="mainContent"> 
<p>lorem ipsum etc..</p> 
</div> 

và

<div id="mainContent"> 
<p>Here is some real content<img class="someImage" src="someImage.jpg" /></p> 
<ul> 
<li>and</li> 
<li>some</li> 
<li>more..</li> 
</ul> 
</div> 

Answer 15

Tôi sẽ sử dụng (hoặc đóng góp vào) html5lib và đầu ra SAX của nó. Chỉ cần nén qua 2 luồng SAX tìm kiếm sự không phù hợp và làm nổi bật toàn bộ cây con tương ứng.

Answer 16

http://www.mugo.ca/Products/Dom-Diff

Làm việc với FF 3.5. Tôi chưa thử nghiệm FF 3.6.

Answer 17

Khá khác có thể thực hiện việc này. Nó sẽ so sánh cấu trúc mã chỉ bất kể sự khác biệt với khoảng trống, nhận xét hoặc thậm chí là nội dung. Chỉ cần chắc chắn để kiểm tra tùy chọn "Normalize Content and String Literals".

http://prettydiff.com/