هل لدى أي شخص خوارزمية فرق لـ HTML المقدمة؟[مغلق]

StackOverflow https://stackoverflow.com/questions/31722

  •  09-06-2019
  •  | 
  •  

سؤال

أنا مهتم برؤية خوارزمية فرق جيدة، ربما في Javascript، لعرض فرق جنبًا إلى جنب بين صفحتين بتنسيق HTML.ستكون الفكرة أن الفرق سيظهر اختلافات المقدمة لغة البرمجة.

للتوضيح، أريد أن أكون قادرًا على رؤية الاختلافات جنبًا إلى جنب مثل الإخراج المقدم.لذا، إذا قمت بحذف فقرة، فإن العرض جنبًا إلى جنب سيعرف كيفية وضع مسافة بين الأشياء بشكل صحيح.


@ جوش بالضبط.على الرغم من أنه ربما سيظهر النص المحذوف باللون الأحمر أو شيء من هذا القبيل.الفكرة هي أنه إذا كنت أستخدم محرر WYSIWYG لمحتوى HTML الخاص بي، فلا أريد أن أضطر إلى التبديل إلى HTML لإجراء الاختلافات.ربما أرغب في القيام بذلك مع اثنين من محرري WYSIWYG جنبًا إلى جنب.أو على الأقل عرض الاختلافات جنبًا إلى جنب بطريقة سهلة الاستخدام.

هل كانت مفيدة؟

المحلول

هناك خدعة لطيفة أخرى يمكنك استخدامها لتحسين مظهر اختلاف HTML المعروض بشكل ملحوظ.على الرغم من أن هذا لا يحل المشكلة الأولية بشكل كامل، إلا أنه سيحدث فرقًا كبيرًا في مظهر اختلافات HTML المعروضة.

سيجعل HTML المعروض جنبًا إلى جنب من الصعب جدًا على فرقك أن تصطف عموديًا.تعد المحاذاة العمودية أمرًا بالغ الأهمية لمقارنة الاختلافات جنبًا إلى جنب.من أجل تحسين المحاذاة الرأسية للفرق جنبًا إلى جنب، يمكنك إدراج عناصر HTML غير مرئية في كل إصدار من الفرق عند "نقاط التفتيش" حيث يجب محاذاة الفرق رأسيًا.بعد ذلك، يمكنك استخدام القليل من JavaScript من جانب العميل لإضافة مسافات عمودية حول نقطة التفتيش حتى تصطف الجوانب عموديًا.

وأوضح بمزيد من التفصيل:

إذا كنت ترغب في استخدام هذه التقنية، قم بتشغيل خوارزمية الفرق الخاصة بك وأدخل مجموعة من visibility:hidden <span>ق أو صغيرة <div>حيثما يجب أن تتطابق الإصدارات جنبًا إلى جنب، وفقًا للفرق.ثم قم بتشغيل JavaScript للعثور على كل نقطة تفتيش (وجارتها جنبًا إلى جنب) وإضافة تباعد رأسي إلى نقطة التحقق الأعلى (الأقل عمقًا) في الصفحة.الآن ستتم محاذاة فرق HTML المعروض الخاص بك عموديًا حتى نقطة التفتيش هذه، ويمكنك الاستمرار في إصلاح المحاذاة الرأسية أسفل بقية الصفحة جنبًا إلى جنب.

نصائح أخرى

خلال عطلة نهاية الأسبوع، قمت بنشر مشروع جديد على codeplex الذي يطبق خوارزمية HTML diff في لغة C#.تمت كتابة الخوارزمية الأصلية بلغة روبي.أتفهم أنك كنت تبحث عن تطبيق JavaScript، وربما يساعدك توفر واحد في C# مع التعليمات البرمجية المصدر في نقل الخوارزمية.هنا هو الرابط إذا كنت مهتما: htmldiff.codeplex.com.يمكنك قراءة المزيد عنها هنا.

تحديث: تم نقل هذه المكتبة إلى جيثب.

انتهى بي الأمر بحاجة إلى شيء مماثل منذ فترة.لجعل HTML يصطف جنبًا إلى جنب، يمكنك استخدام إطاري iFrames، ولكن سيتعين عليك بعد ذلك ربط التمرير معًا عبر جافا سكريبت أثناء التمرير (إذا كنت تسمح بالتمرير).

ومع ذلك، لرؤية الفرق، ستحتاج على الأرجح إلى استخدام مكتبة شخص آخر.إستعملت ديزي ديف, ، مكتبة Java، لمشروع مماثل حيث كان عميلي سعيدًا برؤية عرض HTML واحد للمحتوى باستخدام ترميز يشبه "تتبع التغييرات" في برنامج MS Word.

هث

فكر في استخدام مخرجات الروابط أو الوشق لعرض نسخة نصية فقط من HTML، ثم قم بتمييز ذلك.

ماذا عن ديزي ديف (جافا و بي أتش بي الإصدارات المتاحة).

الميزات التالية جميلة حقًا:

  • يعمل مع HTML سيئ التكوين والذي يمكن العثور عليه "في البرية".
  • الاختلاف أكثر تخصصًا في HTML من اختلاف شجرة XML.لن يؤدي تغيير جزء من العقدة النصية إلى تغيير العقدة بأكملها.
  • بالإضافة إلى الفرق المرئي الافتراضي، يمكن أن يكون مصدر HTML مختلفًا بشكل متماسك.
  • يوفر وصفًا سهل الفهم للتغييرات.
  • تسمح واجهة المستخدم الرسومية الافتراضية بتصفح التعديلات بسهولة من خلال اختصارات لوحة المفاتيح والروابط.

لذلك، تتوقع

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

و

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

ليتم اعتباره نفسه؟

يعتمد الإخراج إلى حد كبير على وكيل المستخدم.يحب يقترح إيونوت أنجيلكوفيتشي, ، اصنع صورة.قم بإجراء واحد لكل متصفح تهتم به.

استخدم وضع العلامات الخاص بـ Pretty Diff لـ HTML.هو مكتوب بالكامل في جافا سكريبت.

http://prettydiff.com/

إذا كان XHTML (الذي يفترض الكثير من جانبي) فهل ستساعد مجموعة أدوات تصحيح Xml Diff؟ http://msdn.microsoft.com/en-us/library/aa302294.aspx

بالنسبة للاختلافات الأصغر، قد تكون قادرًا على إجراء اختلاف عادي في النص، ثم تحليل الأجزاء المفقودة أو المدرجة لمعرفة كيفية حلها، ولكن بالنسبة لأي اختلافات أكبر، فسوف تواجه صعوبة بالغة في القيام بذلك.

على سبيل المثال، كيف يمكنك اكتشاف وإظهار أن الصورة المحاذية لليسار (العائمة على يسار فقرة من النص) أصبحت فجأة محاذاة لليمين؟

سيؤدي استخدام النص المختلف إلى كسر المستندات غير التافهة.اعتمادًا على ما تعتقد أنه بديهي، من المحتمل أن تؤدي اختلافات XML إلى اختلافات ليست جيدة جدًا للنص ذي العلامات.بقدر ما أعلم، ديزي ديف هي المكتبة الوحيدة المتخصصة في HTML.إنه يعمل بشكل رائع مع مجموعة فرعية من HTML.

إذا كنت تعمل مع Java وXHTML، XMLUnit يسمح لك بمقارنة مستندين XML عبر ملف org.custommonkey.xmlunit.DetailedDiff فصل:

يقارن ويصف جميع الاختلافات بين مستندتين XML.لا تتوقف مقارنة المستندات بمجرد العثور على الفرق الأول غير القابل للاسترداد ، على عكس فئة DIFF.

أعتقد أن الطريقة الجيدة للقيام بذلك هي تقديم HTML إلى صورة ومن ثم استخدام بعض أداة فرق يمكنها مقارنة الصور لاكتشاف الاختلافات.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top