1. घर
  2. सवाल और जवाब
  3. एचटीएमएल डिफ टूल कैसे बनाएं इस पर सुझाव?

एचटीएमएल डिफ टूल कैसे बनाएं इस पर सुझाव?

2008-09-17 13 views
11

this post में मैंने पूछा कि क्या कोई उपकरण है जो 2 HTML पृष्ठों की संरचना (वास्तविक सामग्री नहीं) की तुलना करता है। मैं पूछता हूं क्योंकि मुझे हमारे डिजाइनरों से HTML टेम्पलेट प्राप्त होते हैं, और अक्सर मेरे कार्यान्वयन में मामूली स्वरूपण परिवर्तनों को याद करते हैं। मैं फिर अपनी गलतियों को खोजने के लिए अपने पृष्ठों के माध्यम से डिजाइनर समय के कुछ घंटे बर्बाद कर देता हूं।एचटीएमएल डिफ टूल कैसे बनाएं इस पर सुझाव?

धागे ने कुछ अच्छे सुझाव दिए, लेकिन बिल के अनुरूप कुछ भी नहीं था। "ठीक है, फिर", मैंने सोचा, "मैं सिर्फ खुद को क्रैंक कर दूंगा। मैं आधा रास्ते सभ्य डेवलपर हूं, है ना?"।

ठीक है, एक बार जब मैंने इसके बारे में सोचना शुरू किया, तो मुझे पता नहीं चला कि इसके बारे में कैसे जाना है। मैं डेटा-संचालित वेबसाइट को आसानी से पर्याप्त रूप से क्रैंक कर सकता हूं, या सीएमएस कार्यान्वयन कर सकता हूं, या पूरे दिन बिज़टॉक के अंदर और बाहर दस्तावेज फेंक सकता हूं। HTML दस्तावेज़ों की तुलना करने के तरीके को समझना शुरू नहीं कर सकता।

ठीक है, मुझे, डीओएम पढ़ना है, और नोड्स के माध्यम से पुनरावृत्त करना है। मुझे संरचना को कुछ डेटा संरचना (कैसे ??) में मैप करना है, और फिर उनकी तुलना करें (कैसे ??)। यह एक विकास कार्य है जैसे मैंने कभी भी प्रयास नहीं किया है।

तो अब मैंने अपने ज्ञान में कमजोरी की पहचान की है, मैं इसे समझने के लिए और भी चुनौतीपूर्ण हूं। कैसे शुरू किया जाए इस पर कोई सुझाव?

स्पष्टीकरण: - रचनात्मक लोगों lorem ipsum साथ अपने पृष्ठों को भरने, और मैं वास्तविक सामग्री का उपयोग वास्तविक सामग्री क्या मैं तुलना करना चाहते हैं नहीं है। इसके बजाय, मैं संरचना की तुलना करना चाहते:

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

अलग है कि

 

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

स्रोत

2008-09-17 Danimal

उत्तर

-2

ओपन ब्राउज़र में प्रत्येक पृष्ठ और उन्हें .htm फ़ाइलें सहेजने। विंडिफ़ का उपयोग कर दो की तुलना करें।

स्रोत

2008-09-17 19:50:02 Mike

+0

मुझे लगता है कि ओपी की समस्या यह है कि वह पृष्ठ पर और इस प्रक्रिया में सामग्री जोड़ा गया है हो सकता है गलती से कुछ मार्कअप बदल गया है है। तो diffing सभी सामग्री को diffs के रूप में देखेंगे जब वह चाहता है कि मार्कअप diffs है। – EBGreen

1

@ माइक - यह पृष्ठ की सामग्री समेत सब कुछ की तुलना करेगा, जो मूल पोस्टर नहीं चाहता था।

मान लीजिए कि आपके पास ब्राउज़र के डोम तक पहुंच है (फ़ायरफ़ॉक्स/आईई प्लगइन या जो कुछ भी लिखकर), मैं शायद सभी HTML तत्वों को पेड़ में डाल दूंगा, फिर दो पेड़ों की तुलना करें। अगर टैग का नाम अलग है, तो नोड अलग है। हो सकता है कि आप किसी निश्चित बिंदु पर गणना करना बंद कर दें (आपको शायद स्पैन, बोल्ड, इटैलिक इत्यादि की परवाह नहीं है - शायद केवल divs के बारे में चिंता करें?), क्योंकि कुछ टैग वास्तव में संरचना की बजाय सामग्री हैं, पृष्ठ।

स्रोत

2008-09-17 19:54:20 Andy

+0

हालांकि किसी भी संरचनात्मक मतभेद एक विंडिफ़ में दिखाई देंगे। मुझे लगता है कि यह ठीक करना मुश्किल होगा। – Mike

+0

यह सच है। मुझे लगता है कि मुझे लगता है कि ओपी संरचना की मतभेदों को देखना आसान बनाने के लिए पृष्ठ की सामग्री को छिपाने/अनदेखा करने में सक्षम होना चाहता था। – Andy

2

डीओएम एक डेटा संरचना है - यह एक पेड़ है।

स्रोत

2008-09-17 19:54:59

0

मैं किसी भी उपकरण नहीं जानता लेकिन मुझे पता है कि यह करने के लिए एक आसान तरीका है:

  • पहले, अपने HTML फ़ाइल में सभी पाठ बंद पट्टी करने के लिए एक नियमित अभिव्यक्ति का उपयोग करें। आप टेक्स्ट (?<=^|>)[^><]+?(?=<|$) को खोजने के लिए इस नियमित अभिव्यक्ति का उपयोग कर सकते हैं और उन्हें एक खाली स्ट्रिंग ("") से प्रतिस्थापित कर सकते हैं, यानी सभी टेक्स्ट हटाएं। इस चरण के बाद, आपके पास सभी HTML मार्कअप टैग होंगे। वहाँ बहुत सारे मुफ्त नियमित अभिव्यक्ति उपकरण हैं।
  • फिर, आप मूल HTML फ़ाइल के लिए पहला चरण दोहराते हैं।
  • अंतिम, आप HTML मार्कअप के दो सेटों की तुलना करने के लिए एक diff टूल का उपयोग करते हैं। यह दिखाएगा कि एक सेट और दूसरे के बीच क्या गुम है।

स्रोत

2008-09-17 20:01:59 Martin08

2

निम्न पर्ल स्क्रिप्ट के माध्यम से दोनों फ़ाइलों को चलाएं, फिर केस-असंवेदनशील, व्हाइटस्पेस-अनदेखी diff करने के लिए diff -iw का उपयोग करें।

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

स्रोत

2008-09-17 20:13:35 raldi

+0

यह प्रभावी रूप से मैं क्या करूँगा। यह दो फाइलों को उनके मौलिक तत्वों में कम कर देता है, उन चीजों को सामान्य करता है जिनकी आपको परवाह नहीं है (इस मामले में पाठ), फिर असली काम के लिए शेल्फ टूल को बंद कर देता है। –

0

यह एक उत्कृष्ट शुरुआत रही है। कुछ और स्पष्टीकरण/टिप्पणियां:

  • मैं शायद, आईडी के बारे में परवाह नहीं है के बाद से .net उन्हें
  • वध करना होगा संरचना के कुछ एक पुनरावर्तक या अन्य ऐसे नियंत्रण में होगा, तो मैं होने अंत हो सकता है अधिक या कम दोहराने वाले तत्व

आगे विचार: मुझे लगता है कि एचटीएमएल अनुपालन एचटीएमएल का मानना ​​है कि एक अच्छी शुरुआत होगी। मैं फिर स्कीमा का अनुमान लगा सकता हूं (नए .net XmlSchemaInference विधियों का उपयोग करके), फिर स्कीमाटा को अलग करें। फिर मैं मतभेदों को देख सकता हूं और विचार कर सकता हूं कि वे महत्वपूर्ण हैं या नहीं।

स्रोत

2008-09-17 20:39:24 Danimal

1

तो मैं Tacke इस मुद्दे मैं यह करने के लिए किया गया था होगा: एचटीएमएल पृष्ठों के लिए एक डोम के कुछ प्रकार के लिए

  1. योजना। हल्के वजन से शुरू होता है और फिर आवश्यकतानुसार अधिक जोड़ता है। मैं डेटा संरचना के लिए समग्र पैटर्न का उपयोग करेंगे। यानी प्रत्येक तत्व में बेस क्लास प्रकार का बच्चों का संग्रह होता है।
  2. एचटीएमएल पृष्ठों को पार्स करने के लिए एक पार्सर बनाएं।
  3. डीओएम को पार्सर लोड एचटीएमएल तत्व का उपयोग करना।
  4. पृष्ठों को 'डोम तक लोड करने के बाद, आपके एचटीएमएल पेज संरचना का पदानुक्रमित स्नैपशॉट है।
  5. डीओएम के अंत तक दोनों तरफ से प्रत्येक तत्व के माध्यम से पुनरावृत्त रखें। जब आप तत्व प्रकार के मेल नहीं खाते हैं, तो आपको संरचना में diff मिल जाएगा।

आपके उदाहरण में आपके पास एक तरफ केवल एक div तत्व ऑब्जेक्ट लोड होगा, दूसरी तरफ आपके पास एक div तत्व ऑब्जेक्ट टाइप पैराग्राफ तत्व के 1 बच्चे तत्व के साथ लोड होगा। अपने इटेटरेटर को फायर करें, सबसे पहले आप div तत्व से मेल खाएंगे, दूसरा इटरेटर आप पैराग्राफ से कुछ भी नहीं मिला होगा। आपको अपना संरचनात्मक अंतर मिला है।

स्रोत

2008-09-17 20:56:07 RWendi

1

मुझे लगता है कि ऊपर दिए गए कुछ सुझाव इस बात पर ध्यान नहीं देते हैं कि एचटीएमएल में दो टैग्स के बीच अन्य टैग हैं जो टेक्स्ट अलग-अलग होंगे, लेकिन परिणामस्वरूप HTML मार्कअप कार्यात्मक रूप से समकक्ष है। डेनिमल एक उदाहरण के रूप में नियंत्रण आईडी सूचीबद्ध करता है।

निम्न दो मार्कअप functionlly समान हैं, लेकिन के रूप में विभिन्न आप बस की तुलना में टैग करता है, तो नज़र आएगा:

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

मैं Danimal एक HTML अनुवाद जो HTML टैग के लिए लग रहा है और दोनों धर्मान्तरित बारे में सुझाव देने के लिए जा रहा था दोनों के सरलीकृत संस्करण में डॉक्स जो आईडी टैग और किसी भी अन्य टैग को अप्रासंगिक मानते हैं। यह संभवतः एक काम प्रगति पर होना चाहिए, क्योंकि आप कुछ विशेषताओं/टैगों को अनदेखा करते हैं और फिर उन नए में चलाते हैं जिन्हें आप अनदेखा करना चाहते हैं।

हालांकि, मुझे XML स्कीमा में इसे उबालने के लिए XmlSchemaInterface का उपयोग करने का विचार पसंद है, फिर एक्सएमएल नियमों को समझने वाले एक diff टूल का उपयोग करें।

स्रोत

2008-09-18 13:06:29

0

मेरा सुझाव सिर्फ यह करने का मूल तरीका है ... निश्चित रूप से आपके द्वारा उल्लिखित मुद्दे से निपटने के लिए अतिरिक्त नियम यहां लागू किए जाने चाहिए ...जो आपके मामले में है, हमें एक मिलान div तत्व मिल गया है, और फिर गुण/संपत्ति मिलान नियम लागू करें और क्या नहीं ...

ईमानदार होने के लिए, तुलनात्मक रूप से कई जटिल और जटिल नियम लागू किए जाने की आवश्यकता है, और यह किसी अन्य तत्व के लिए सिर्फ एक साधारण मिलान तत्व नहीं है। उदाहरण के लिए यदि आपके पास डुप्लीकेट हैं तो क्या होता है। उदा। एक तरफ 1 div तत्व, और दूसरी तरफ 2 div तत्व। आप कैसे मिलेंगे आप कौन से div तत्व एक साथ मेल खाते हैं?

तुलनात्मक शब्द में आपको बहुत ही जटिल समस्याएं मिलेंगी। मैं अनुभव के आधार पर बोल रहा हूं (मेरे काम का हिस्सा मेरी कंपनी टेक्स्ट तुलना इंजन को मैटैन करना है)।

स्रोत

2008-09-20 11:35:13 RWendi

1

लैंगेज व्याकरण द्वारा पैरामीटर किए गए टूल के लिए http://www.semdesigns.com/Products/SmartDifferencer/index.html देखें, और भाषा तत्वों (पहचानकर्ताओं, अभिव्यक्तियों, बयानों, ब्लॉक, विधियों, ...) के संदर्भ में डेल्टा उत्पन्न करता है, हटाया गया, स्थानांतरित, प्रतिस्थापित, या पहचानकर्ता है लगातार इसके चारों ओर प्रतिस्थापित। यह टूल व्हाइटस्पेस रीफॉर्मेटिंग (उदा।, विभिन्न लाइनब्रेक्स या लेआउट) और अर्थात् अलग-अलग मूल्यों को अनदेखा करता है (उदाहरण के लिए, यह जानता है कि 0x0F और 15 समान मान हैं)। इसे HTML पार्सर का उपयोग करके HTML पर लागू किया जा सकता है।

संपादित करें: 9/12/2009। हमने एक HTML संपादक का उपयोग कर एक प्रयोगात्मक SmartDiff टूल बनाया है।

स्रोत

2009-06-17 10:14:23

-1

अगर मैं ऐसा करना चाहता था, तो पहले मैं HTML सीखूंगा। (^ - ^) फिर मैं एक ऐसा टूल तैयार करूंगा जो सभी वास्तविक सामग्री को स्ट्रिप्स करता है और फिर उसे फ़ाइल के रूप में सहेजता है ताकि इसे WinDiff (या अन्य मर्ज टूल) के माध्यम से पाइप किया जा सके।

स्रोत

2009-09-12 08:29:40 RCIX

0

तुलना से परे एक नज़र डालें। इसमें एक एक्सएमएल तुलना सुविधा है जो आपकी मदद कर सकती है।

स्रोत

2009-09-12 08:37:16

0

आपको यह भी विचार करना पड़ सकता है कि 'सामग्री' में अतिरिक्त मार्क-अप हो सकता है, इसलिए आपकी तुलना करने से पहले कुछ निश्चित तत्वों (जैसे <div> एस कुछ आईडी या कक्षाओं के साथ) में सब कुछ अलग करना संभव है।

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

स्रोत

2009-09-12 09:01:47 Nick

0

मैं का प्रयोग करेंगे (या करने के लिए योगदान) html5lib और उसके SAX उत्पादन: उदाहरण के लिए। केवल 2 एसएक्स धाराओं के माध्यम से मिस्चैच की तलाश में ज़िप करें और पूरे संबंधित उप-हाइलाइट को हाइलाइट करें। एफएफ 3.5 के साथ

स्रोत

2010-03-28 04:50:58 hdhoang

1

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

काम करता है। मैंने अभी तक एफएफ 3.6 का परीक्षण नहीं किया है।

स्रोत

2010-07-27 09:46:19 Philipp

+0

इस – MorganTiley

+1

पर कोई काम नहीं किया जा रहा है यूआरएल अमान्य है। – t98907

0

सुंदर डिफ ऐसा कर सकता है। यह केवल सफेद स्थान, टिप्पणियों या यहां तक ​​कि सामग्री के मतभेदों के बावजूद कोड संरचना की तुलना करेगा। बस "सामान्य सामग्री और स्ट्रिंग लिटरेल्स" विकल्प को जांचना सुनिश्चित करें।

http://prettydiff.com/

स्रोत

2012-01-06 18:49:16 austincheney

संबंधित मुद्दे

 संबंधित मुद्दे