किसी को गाया HTML के लिए एक अलग एल्गोरिथ्म है? [बन्द है]


85

मैं एक अच्छा अंतर एल्गोरिथ्म देखने में रुचि रखता हूं, संभवतः जावास्क्रिप्ट में, दो HTML पृष्ठों के साइड-बाय-साइड अंतर को प्रस्तुत करने के लिए। यह विचार यह होगा कि यह अंतर प्रदान किए गए HTML के अंतर को दिखाएगा ।

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


@ जोश बिल्कुल हालांकि शायद यह हटाए गए पाठ को लाल या कुछ में दिखाएगा। विचार यह है कि अगर मैं अपने HTML सामग्री के लिए WYSIWYG संपादक का उपयोग करता हूं, तो मुझे अलग-अलग करने के लिए HTML पर स्विच करने की आवश्यकता नहीं है। मैं इसे दो WYSIWYG संपादकों के साथ कंधे से कंधा मिलाकर करना चाहता हूं। या कम से कम डिस्प्ले एंड-साइड-साइड में एंड-यूज़र फ्रेंडली मैटर में भिन्न होता है।


1
क्या यह वास्तव में microsoft का शिकार है? मूल एक? : डी
अहमद खलफ़

1
इस सवाल के समान लगता है: stackoverflow.com/questions/1061468/html-compare
rjmunro

2
पुराना धागा, लेकिन मुझे लगा कि मैं अपना 2 सेंट दूंगा। मैं इसके साथ बहुत हाल ही में काम कर रहा हूं, और उन पर लिबास
onassar

2
@ हतप्रभ, क्या कभी कोई संतोषजनक समाधान मिलता है?
डीजी।

@ हॅकड को काम करने का हल मिला? मैंने कोशिश की prettydiff.comलेकिन ऐसा लग रहा है कि यह टूट गया है।
कोडिंग_डॉट

जवाबों:


17

एक और अच्छी चाल है जिसका उपयोग आप एक प्रदान किए गए HTML भिन्न के रूप को सुधारने के लिए कर सकते हैं। यद्यपि यह प्रारंभिक समस्या को पूरी तरह से हल नहीं करता है, यह आपके प्रदान किए गए HTML भिन्न की उपस्थिति में महत्वपूर्ण अंतर लाएगा।

साइड-बाय-साइड HTML प्रदान की गई है जो आपके अंतर को लंबवत रूप से पंक्तिबद्ध करने के लिए बहुत कठिन बना देगा। अगल-बगल की भिन्नताओं की तुलना करने के लिए ऊर्ध्वाधर संरेखण महत्वपूर्ण है। साइड-बाय-साइड फ़र्क के वर्टिकल अलाइनमेंट को बेहतर बनाने के लिए, आप "चौकियों" के प्रत्येक संस्करण में अदृश्य एचटीएमएल तत्वों को सम्मिलित कर सकते हैं, जहाँ फ़ॉर वर्टिकली एलाइन होना चाहिए। तब आप चेक-पॉइंट के चारों ओर वर्टिकल रिक्ति जोड़ने के लिए क्लाइंट-साइड जावास्क्रिप्ट का एक सा उपयोग कर सकते हैं जब तक कि साइड्स लंबवत रूप से पंक्तिबद्ध न हो जाएं।

थोड़ा और विस्तार से बताया:

यदि आप इस तकनीक का उपयोग करना चाहते हैं, तो अपने अलग एल्गोरिथ्म को चलाएं और visibility:hidden <span>एस या छोटे <div>एस का एक गुच्छा डालें, जहां आपके साइड-बाय-साइड संस्करणों को अंतर के अनुसार मेल खाना चाहिए। फिर जावास्क्रिप्ट को चलाएं जो प्रत्येक चेकपॉइंट (और इसके अगल-बगल वाले पड़ोसी) को ढूंढता है और पृष्ठ पर उस चेकपॉइंट पर वर्टिकल स्पेसिंग जोड़ता है जो उच्च-अप (shallower) है। अब आपका प्रदान किया गया HTML वर्टिकल उस चेकपॉइंट पर लंबवत रूप से संरेखित हो जाएगा, और आप अपने बाकी के साइड-पेज पर वर्टिकल अलाइनमेंट को रिपेयर करना जारी रख सकते हैं।


17

सप्ताहांत में मैंने कोडप्लेक्स पर एक नई परियोजना पोस्ट की, जो सी # में एक HTML अलग एल्गोरिथ्म को लागू करती है। मूल एल्गोरिथ्म रूबी में लिखा गया था। मैं समझता हूं कि आप जावास्क्रिप्ट कार्यान्वयन के लिए देख रहे थे, शायद स्रोत कोड के साथ C # में एक उपलब्ध होने से आपको एल्गोरिथ्म को पोर्ट करने में मदद मिल सकती है। : यहाँ लिंक यदि आप रुचि रहे हैं htmldiff.codeplex.com । आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं ।

अद्यतन: इस पुस्तकालय को GitHub में स्थानांतरित कर दिया गया है


4
HTMLDiff एल्गोरिथ्म को यहां जावास्क्रिप्ट (कॉफीस्क्रिप्ट) में पोर्ट किया गया है
फ्लोरियन परैन

हाय @pate, मेरा मानना ​​है कि ये लिंक अब काम नहीं कर रहे हैं ...
Tiago Cardoso

@TiagoCardoso ने मेरी दिनांकित टिप्पणी को हटा दिया।
पेट्रस थेरॉन

@ रॉलैंड बहुत बढ़िया पुस्तकालय! वास्तव में मेरा दिन बचा लिया :)
सिरार सलीह

2
@Florian Parain: लिंक को साझा करने के लिए धन्यवाद github.com/tnwinc/htmldiff.js यह बहुत अच्छा काम करता है! जेएस संस्करण चाहते हैं, जो किसी के लिए टिप, बस "npm स्थापित htmldiff" के माध्यम से स्थापित करें और फिर "src" निर्देशिका में htmldiff.js का उपयोग करें।
एलिय्याह लोफग्रेन

4

मैं वापस कुछ ऐसे ही कुछ समय की जरूरत है। HTML को साइड-अप करने के लिए, आप दो iFrames का उपयोग कर सकते हैं, लेकिन आपको स्क्रॉल करते समय जावास्क्रिप्ट के माध्यम से एक साथ उनकी स्क्रॉलिंग को टाई करना होगा (यदि आप स्क्रॉल करने की अनुमति देते हैं)।

हालांकि, अंतर को देखने के लिए, आप संभावना से अधिक किसी और के पुस्तकालय का उपयोग करना चाहेंगे। मैंने एक समान परियोजना के लिए एक जावा पुस्तकालय, डेज़ीडीफ का उपयोग किया , जहां मेरा क्लाइंट एमएस वर्ड "ट्रैक चेंजेस" -रूप मार्कअप के साथ एक एकल HTML सामग्री को देखकर खुश था।

HTH


daisydiff अच्छा लगता है
कोडिंग_डॉट

4

HTML के केवल-पाठ संस्करण को रेंडर करने के लिए लिंक या लिनेक्स के आउटपुट का उपयोग करने पर विचार करें, और फिर इसे अलग करें।


2

DaisyDiff ( जावा और PHP उपलब्ध vesions) के बारे में क्या ।

निम्नलिखित विशेषताएं वास्तव में अच्छी हैं:

  • बुरी तरह से बनाए गए HTML के साथ काम करता है जो "जंगली में" पाया जा सकता है।
  • XML ट्री डिफरेंशियल की तुलना में HTML में डिफाइनिंग अधिक विशिष्ट है। टेक्स्ट नोड का हिस्सा बदलने से संपूर्ण नोड परिवर्तित नहीं होगा।
  • डिफ़ॉल्ट दृश्य अंतर के अलावा, HTML स्रोत को सुसंगत रूप से अलग किया जा सकता है।
  • परिवर्तनों के विवरण को समझने में आसानी प्रदान करता है।
  • डिफ़ॉल्ट जीयूआई कीबोर्ड शॉर्टकट और लिंक के माध्यम से संशोधनों को आसानी से ब्राउज़ करने की अनुमति देता है।

1

तो, आप उम्मीद करते हैं

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

तथा

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

एक ही माना जाता है?

आउटपुट यूजर एजेंट पर बहुत निर्भर करता है। जैसे Ionut Anghelcovici सुझाव देता है , एक छवि बनाएं। आपके द्वारा परवाह किए गए प्रत्येक ब्राउज़र के लिए एक करें।


1

HTML के लिए सुंदर डिफ के मार्कअप मोड का उपयोग करें। यह पूरी तरह से जावास्क्रिप्ट में लिखा गया है।

http://prettydiff.com/


1
क्या यह प्रदान की गई भिन्नता का समर्थन करता है? मुझे विकल्प नहीं मिला।
जोएल पेल्टनन

2
नीचे बताए अनुसार मैं प्रदान किए गए अंतर को नहीं पा सका।
टिआगो कार्डसो


0

छोटे अंतर के लिए आप एक सामान्य पाठ-अंतर करने में सक्षम हो सकते हैं, और फिर लापता या सम्मिलित टुकड़ों का विश्लेषण करके देख सकते हैं कि इसे कैसे हल किया जाए, लेकिन किसी भी बड़े अंतर के लिए आपको ऐसा करने में बहुत कठिन समय लगेगा।

उदाहरण के लिए, आप कैसे पता लगाएंगे, और दिखाएंगे कि एक बाईं-संरेखित छवि (पाठ के एक पैराग्राफ के बाईं ओर तैरना) अचानक सही-संरेखित हो गई है?


0

पाठ भिन्न का उपयोग करना गैर-तुच्छ दस्तावेजों पर टूट जाएगा। जो आपको लगता है कि सहज ज्ञान युक्त है, उसके आधार पर, XML भिन्नता संभवतः भिन्नता उत्पन्न करेगी जो मार्कअप के साथ पाठ के लिए बहुत अच्छा नहीं है। AFAIK, DaisyDiff HTML में विशेषीकृत एकमात्र पुस्तकालय है। यह HTML के सबसेट के लिए बहुत अच्छा काम करता है।


0

यदि आप जावा और एक्सएचटीएमएल के साथ काम कर रहे थे, तो XMLUnit आपको org.ustommonkey.xmlunit.DetailedDiff वर्ग के माध्यम से दो XML दस्तावेजों की तुलना करने की अनुमति देता है :

दो XML दस्तावेजों के बीच सभी अंतरों की तुलना और वर्णन करता है। दस्तावेज़ की तुलना तब तक नहीं रुकती जब तक कि डिफरेंट क्लास के विपरीत, पहला अप्राप्य अंतर नहीं मिल जाता।


-5

मेरा मानना ​​है कि ऐसा करने का एक अच्छा तरीका यह है कि HTML को एक छवि के लिए रेंडर किया जाए और फिर कुछ अलग टूल का उपयोग किया जाए जो अंतर की जगह छवियों की तुलना कर सकते हैं


इन दो छवियों में कोई भी मिसलिग्न्मेंट निश्चित रूप से बड़े पैमाने पर अंतर पैदा करेगा, जहाँ वास्तविक अंतर सिर्फ मीनिस्कुल है, जैसे कि एक टेबल दो पृष्ठों में से एक में एक पिक्सेल अधिक होती है।
लास वी। कार्लसन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.