c# - HTML Diff ツールの作成方法に関する提案はありますか?

Question

この投稿では、2 つの HTML ページの構造 (実際のコンテンツではない) を比較するツールがあるかどうかを尋ねました。デザイナーから HTML テンプレートを受け取り、実装の小さな書式設定の変更を頻繁に見逃しているため、質問します。次に、間違いを見つけるためにページをふるいにかけるデザイナーの時間を数時間無駄にします。

スレッドはいくつかの良い提案を提供しましたが、法案に合うものは何もありませんでした. 「よし、それなら」と私は思った。

うーん、考え始めたらどうしたらいいのかわからない。データ駆動型の Web サイトを簡単に作成したり、CMS を実装したり、BizTalk にドキュメントを 1 日中出し入れしたりできます。HTML ドキュメントを比較する方法がわかりません。

確かに、DOM を読み取って、ノードを反復処理する必要があります。構造を何らかのデータ構造にマップし (どのように??)、それらを比較する必要があります (どのように??)。これまで試みたことのない開発作業です。

自分の知識の弱点を特定したので、これを理解するのはさらに困難です. 開始方法に関する提案はありますか?

明確化: 実際のコンテンツは私が比較したいものではありません.クリエイティブな人たちはページをlorem ipsumで埋めており、私は実際のコンテンツを使用しています. 代わりに、構造を比較したいと思います。

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

それは違う


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

score 2 · Accepted Answer

2

DOMはデータ構造であり、ツリーです。

于 2008-09-17T19:54:59.173 に答える

score 2 · Accepted Answer

次の Perl スクリプトを使用して両方のファイルを実行し、次に diff -iw を使用して大文字と小文字を区別せず、空白を無視して diff を実行します。

#! /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";
  }
}

score 1 · Accepted Answer

@Mike-元のポスターが欲しくないページのコンテンツを含むすべてを比較します。

ブラウザのDOMにアクセスできると仮定すると（Firefox / IEプラグインなどを作成することにより）、おそらくすべてのHTML要素をツリーに入れてから、2つのツリーを比較します。タグ名が異なる場合、ノードも異なります。一部のタグは実際には構造ではなくコンテンツであるため、特定の時点で列挙を停止することをお勧めします（スパン、太字、斜体などは気にしないでください。divだけを気にする必要がありますか？）。ページ。

score 1 · Accepted Answer

言語文法によってパラメーター化され、言語要素（識別子、式、ステートメント、ブロック、メソッドなど）に関してデルタを生成するツールについては、http：//www.semdesigns.com/Products/SmartDifferencer/index.htmlを参照してください。）挿入、削除、移動、置換、または識別子が一貫して置換されている。このツールは、空白の再フォーマット（たとえば、異なる改行やレイアウト）と意味的に区別できない値（たとえば、0x0Fと15が同じ値であることを認識している）を無視します。これは、HTMLパーサーを使用してHTMLに適用できます。

編集：2009年9月12日。HTMLエディターを使用して実験的なSmartDiffツールを構築しました。

score 1 · Accepted Answer

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

FF3.5で動作します。FF 3.6 はまだテストしていません。

score 1 · Accepted Answer

この問題に取り組むとしたら、次のようにします。

HTML ページ用のある種の DOM を計画します。軽量で開始し、必要に応じてさらに追加します。データ構造には複合パターンを使用します。つまり、すべての要素には、基本クラスタイプの子コレクションがあります。
HTML ページを解析するパーサーを作成します。
パーサーを使用して html 要素を DOM にロードします。
ページが DOM に読み込まれると、html ページ構造の階層的なスナップショットが得られます。
DOM の最後まで、両側のすべての要素を繰り返します。不一致の要素タイプにヒットすると、構造内に差分が見つかります。

あなたの例では、片側に div 要素オブジェクトのみがロードされ、反対側にはタイプ段落要素の 1 つの子要素がロードされた div 要素オブジェクトがあります。イテレータを起動します。最初に div 要素を一致させ、2 番目のイテレータで段落を何も一致させません。構造的な違いがあります。

score 1 · Accepted Answer

上記の提案のいくつかは、テキストが異なる 2 つのページ間の HTML に他のタグがあることを考慮していないと思いますが、結果の HTML マークアップは機能的に同等です。Danimal は、例としてコントロール ID をリストしています。

次の 2 つのマークアップは機能的には同じですが、単純にタグを比較すると異なるように見えます。

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

Danimal に、HTML タグを探して両方のドキュメントを単純化されたバージョンに変換する HTML 翻訳を書くよう提案するつもりでした。特定の属性/タグを無視してから、無視したい新しい属性/タグに遭遇するため、これはおそらく進行中の作業である必要があります.

ただし、XmlSchemaInterface を使用してそれを XML スキーマに煮詰めてから、XML ルールを理解する diff ツールを使用するというアイデアが気に入っています。

score 0 · Accepted Answer

html5libとその SAX 出力を使用 (または貢献)します。2 つの SAX ストリームを調べて不一致を探し、対応するサブツリー全体を強調表示します。

score 0 · Accepted Answer

私の提案はそれを行う基本的な方法です...もちろん、あなたが言及した問題に取り組むには、ここで追加のルールを適用する必要があります...あなたの場合、一致する div 要素を取得し、属性/プロパティの一致を適用しますルールとそうでないもの...

正直なところ、比較には多くの複雑なルールを適用する必要があり、単純に要素を別の要素に一致させるだけではありません。たとえば、重複がある場合はどうなりますか。たとえば、一方の側に 1 つの div 要素、もう一方の側に 2 つの div 要素。どの div 要素が一致するかをどのように一致させるつもりですか?

比較語には他にも多くの複雑な問題があります。私は経験に基づいて話しています (私の仕事の一部は、会社のテキスト比較エンジンを維持することです)。

score 0 · Accepted Answer

また、「コンテンツ」自体に追加のマークアップが含まれる可能性があることを考慮する必要がある場合もあるため<div>、比較を行う前に、特定の要素 (特定の ID やクラスを持つなど) 内のすべてを削除する価値があります。例えば：

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

と

<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>

score 0 · Accepted Answer

これは素晴らしいスタートです。さらにいくつかの説明/コメント:

.netはそれらを台無しにするので、私はおそらくIDを気にしません
構造の一部はリピーターまたはその他のそのようなコントロールにあるため、繰り返し要素が多かったり少なかったりする可能性があります

さらに考えてみましょう: html が XHTML に準拠していると仮定することから始めるのが良いと思います。次に、(新しい .net XmlSchemaInference メソッドを使用して) スキーマを推測し、スキーマを比較します。次に、違いを見て、それらが重要かどうかを検討します。

score 0 · Accepted Answer

ツールはわかりませんが、これを行う簡単な方法があることは知っています。

まず、正規表現ツールを使用して、HTML ファイル内のすべてのテキストを取り除きます。この正規表現を使用してテキスト ( ) を検索し、?<=^|>)[^><]+?(?=<|$それらを空の文字列 ( ) に置き換える""、つまりすべてのテキストを削除することができます。この手順の後、すべての HTML マークアップタグが作成されます。無料の正規表現ツールはたくさんあります。
次に、元の HTML ファイルに対して最初の手順を繰り返します。
最後に、差分ツールを使用して 2 つの HTML マークアップセットを比較します。これにより、あるセットと別のセットの間に何が欠けているかがわかります。

score 0 · Accepted Answer

0

比較を超えて見てください。これには、役立つ XML 比較機能があります。

于 2009-09-12T08:37:16.517 に答える

score 0 · Accepted Answer

Pretty Diff はこれを行うことができます。空白、コメント、さらにはコンテンツの違いに関係なく、コード構造のみを比較します。「コンテンツと文字列リテラルを正規化する」オプションを必ずチェックしてください。

http://prettydiff.com/

score -1 · Accepted Answer

もし私がこれをやるとしたら、まず HTML を学びます。(^-^) 次に、実際のコンテンツをすべて取り除き、それをファイルとして保存するツールを作成して、WinDiff (または他のマージツール) を介してパイプ処理できるようにします。

score -2 · Accepted Answer

ブラウザで各ページを開き、.htmファイルとして保存します。windiffを使用して2つを比較します。

c# - HTML Diff ツールの作成方法に関する提案はありますか?

16 に答える 16

Related

Reference