İşlenmiş HTML için fark algoritması olan var mı? [kapalı]

İki HTML sayfasının yan yana farkını oluşturmak için muhtemelen Javascript'te iyi bir fark algoritması görmekle ilgileniyorum. Buradaki fikir, farkın işlenmiş HTML'nin farklılıklarını göstermesidir .

Açıklığa kavuşturmak için, yan yana farkları işlenmiş çıktı olarak görebilmek istiyorum . Dolayısıyla, bir paragrafı silersem, yan yana görünüm her şeyi doğru bir şekilde yerleştirmeyi bilir.

@Josh tam olarak. Belki silinen metni kırmızı veya başka bir şekilde gösterebilirdi. Buradaki fikir şu ki, HTML içeriğim için bir WYSIWYG düzenleyici kullanırsam, farklar yapmak için HTML'ye geçmek zorunda kalmak istemiyorum. Bunu iki WYSIWYG editörüyle yan yana yapmak istiyorum belki. Veya en azından ekran, son kullanıcı dostu bir konuda yan yana farklılık gösteriyor.

İşlenmiş bir HTML farkının görünümünü önemli ölçüde iyileştirmek için kullanabileceğiniz başka bir güzel numara var. Bu, ilk sorunu tam olarak çözmese de, işlenmiş HTML farklılıklarınızın görünümünde önemli bir fark yaratacaktır.

Yan yana oluşturulan HTML, farkınızın dikey olarak sıralanmasını çok zorlaştıracaktır. Dikey hizalama, yan yana farkları karşılaştırmak için çok önemlidir. Yan yana farkın dikey hizalamasını iyileştirmek için, farkın her bir sürümüne farkın dikey olarak hizalanması gereken "kontrol noktalarına" görünmez HTML öğeleri ekleyebilirsiniz. Ardından, kenarlar dikey olarak hizalanana kadar denetim noktası etrafına dikey boşluk eklemek için biraz istemci tarafı JavaScript kullanabilirsiniz.

Biraz daha ayrıntılı olarak açıklandı:

Bu tekniği kullanmak istiyorsanız, fark algoritmanızı çalıştırın ve farka göre yan yana sürümlerinizin eşleşmesi gereken yere bir grup visibility:hidden <span>s veya küçük <div>s ekleyin. Ardından, her bir kontrol noktasını (ve yan yana komşusunu) bulan ve sayfada daha yukarıda (daha sığ) olan kontrol noktasına dikey boşluk ekleyen JavaScript'i çalıştırın. Artık işlenmiş HTML farkınız bu kontrol noktasına dikey olarak hizalanacak ve yan yana sayfanızın geri kalanında dikey hizalamayı onarmaya devam edebilirsiniz.

Hafta sonu boyunca C # 'da bir HTML diff algoritması uygulayan codeplex üzerine yeni bir proje yayınladım. Orijinal algoritma Ruby'de yazılmıştır. Bir JavaScript uygulaması aradığınızı anlıyorum, belki de C #'da kaynak kodlu bir tane mevcut olması algoritmayı taşımanıza yardımcı olabilir. İlgileniyorsanız bağlantı: htmldiff.codeplex.com . Bu konuda daha fazla bilgi bulabilirsiniz burada .

GÜNCELLEME: Bu kitaplık GitHub'a taşındı .

Bir süre önce benzer bir şeye ihtiyacım oldu. HTML'nin yan yana sıralanması için iki iFrame kullanabilirsiniz, ancak daha sonra kaydırırken javascript aracılığıyla kaydırmayı birbirine bağlamanız gerekir (kaydırmaya izin verirseniz).

Ancak farkı görmek için büyük olasılıkla başka birinin kitaplığını kullanmak isteyeceksiniz. Müşterimin MS Word "değişiklikleri izle" benzeri biçimlendirmeyle içeriğin tek bir HTML oluşturulmasını görmekten memnun olduğu benzer bir proje için Java kitaplığı olan DaisyDiff'i kullandım .

HTH

Html'nin salt metin sürümünü oluşturmak için bağlantıların veya lynx'in çıktısını kullanmayı düşünün ve ardından bunu farklılaştırın.

Ya DaisyDiff ( Java ve PHP sürümleri mevcuttur).

Aşağıdaki özellikler gerçekten çok güzel:

• "Doğada" bulunabilen kötü biçimlendirilmiş HTML ile çalışır.
• Farklılık, HTML'de XML ağacının farklılık gösterdiğinden daha uzmanlaşmıştır. Bir metin düğümünün bir bölümünü değiştirmek, tüm düğümün değişmesine neden olmaz.
• Varsayılan görsel farka ek olarak, HTML kaynağı tutarlı bir şekilde farklılaştırılabilir.
• Değişikliklerin kolay anlaşılır açıklamalarını sağlar.
• Varsayılan GUI, klavye kısayolları ve bağlantılar aracılığıyla değişikliklere kolayca göz atmanıza olanak tanır.

Yani bekliyorsun

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

ve

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

aynı kabul edilmek?

Çıktı, Kullanıcı Aracısına çok bağlıdır. Gibi Ionut Anghelcovici anlaşılacağı , bir resim yapması. Önem verdiğiniz her tarayıcı için bir tane yapın.

HTML için Pretty Diff'in işaretleme modunu kullanın. Tamamen JavaScript ile yazılmıştır.

http://prettydiff.com/

XHTML ise (benim açımdan çok şey var) Xml Diff Patch Toolkit yardımcı olur mu? http://msdn.microsoft.com/en-us/library/aa302294.aspx

Daha küçük farklılıklar için normal bir metin farkı yapabilir ve ardından eksik veya eklenmiş parçaları nasıl çözeceğinizi görmek için analiz edebilirsiniz, ancak daha büyük farklılıklar için bunu yapmakta çok zorlanacaksınız.

Örneğin, sola hizalı bir görüntünün (bir metin paragrafının solunda kayan) aniden sağa hizalı hale geldiğini nasıl algılar ve gösterirsiniz?

Farklı bir metin kullanmak, önemsiz olmayan belgelerde kırılır. Sezgisel olduğunu düşündüğünüz şeye bağlı olarak, XML farklılıkları muhtemelen biçimlendirmeli metinler için çok iyi olmayan farklar oluşturacaktır. AFAIK, DaisyDiff HTML konusunda uzmanlaşmış tek kütüphanedir. Bir HTML alt kümesi için harika çalışıyor.

Java ve XHTML ile çalışıyorsanız, XMLUnit iki XML belgesini org.custommonkey.xmlunit.DetailedDiff sınıfı aracılığıyla karşılaştırmanıza olanak tanır :

İki XML belgesi arasındaki tüm farkları karşılaştırır ve açıklar. Diff sınıfının aksine, ilk kurtarılamayan fark bulunduğunda belge karşılaştırması durmaz.

Bunu yapmanın iyi bir yolunun HTML'yi bir görüntüye dönüştürmek ve ardından farklılıkları tespit etmek için görüntüleri karşılaştırabilen bir diff aracı kullanmak olduğuna inanıyorum .