ใครมีอัลกอริทึมที่แตกต่างกันสำหรับ HTML ที่แสดงผล? [ปิด]

ฉันสนใจที่จะเห็นอัลกอริทึมที่แตกต่างที่ดีซึ่งอาจเป็นใน Javascript สำหรับการแสดงผลความแตกต่างแบบเคียงข้างกันของหน้า HTML สองหน้า แนวคิดคือความแตกต่างจะแสดงความแตกต่างของHTML ที่แสดงผล

เพื่อความชัดเจนฉันต้องการที่จะเห็นความแตกต่างแบบเคียงข้างกันเป็นผลลัพธ์ที่แสดงผล ดังนั้นถ้าฉันลบย่อหน้ามุมมองด้านข้างจะรู้ว่าต้องเว้นวรรคอย่างถูกต้อง

@ จอชเป๊ะ. แม้ว่าอาจจะแสดงข้อความที่ถูกลบเป็นสีแดงหรือบางอย่าง แนวคิดก็คือถ้าฉันใช้โปรแกรมแก้ไขแบบ WYSIWYG สำหรับเนื้อหา HTML ของฉันฉันไม่ต้องการที่จะเปลี่ยนไปใช้ HTML เพื่อสร้างความแตกต่าง ฉันต้องการทำโดยใช้โปรแกรมแก้ไข WYSIWYG สองตัวเคียงข้างกัน หรืออย่างน้อยการแสดงผลก็แตกต่างกันไปในเรื่องที่เป็นมิตรกับผู้ใช้ปลายทาง

มีเคล็ดลับดีๆอีกอย่างที่คุณสามารถใช้เพื่อปรับปรุงรูปลักษณ์ของ HTML ที่แสดงผลต่างกันได้อย่างมาก แม้ว่าจะไม่สามารถแก้ปัญหาเบื้องต้นได้อย่างสมบูรณ์ แต่ก็จะสร้างความแตกต่างอย่างมีนัยสำคัญในลักษณะของ HTML ที่แสดงผลของคุณแตกต่างกัน

HTML ที่แสดงผลแบบเคียงข้างกันจะทำให้ความแตกต่างของคุณจัดเรียงในแนวตั้งได้ยากมาก การจัดแนวตั้งเป็นสิ่งสำคัญสำหรับการเปรียบเทียบความแตกต่างแบบเคียงข้างกัน ในการปรับปรุงการจัดแนวแนวตั้งของความแตกต่างแบบเคียงข้างกันคุณสามารถแทรกองค์ประกอบ HTML ที่มองไม่เห็นในแต่ละเวอร์ชันของความแตกต่างได้ที่ "จุดตรวจ" โดยที่ส่วนต่างควรอยู่ในแนวตั้ง จากนั้นคุณสามารถใช้ JavaScript ฝั่งไคลเอ็นต์เพื่อเพิ่มระยะห่างแนวตั้งรอบ ๆ จุดตรวจจนกว่าด้านข้างจะเรียงเป็นแนวตั้ง

อธิบายในรายละเอียดเพิ่มเติมเล็กน้อย:

หากคุณต้องการใช้เทคนิคนี้ให้เรียกใช้อัลกอริทึมความแตกต่างของคุณและแทรกกลุ่มของvisibility:hidden <span>s หรือ<div>s เล็ก ๆที่ใดก็ตามที่เวอร์ชันเคียงข้างกันของคุณควรจับคู่กันตามความแตกต่าง จากนั้นเรียกใช้ JavaScript ที่ค้นหาแต่ละจุดตรวจ (และเพื่อนบ้านเคียงข้างกัน) และเพิ่มระยะห่างแนวตั้งให้กับจุดตรวจที่อยู่สูงขึ้น (ตื้นขึ้น) บนหน้า ตอนนี้ความแตกต่างของ HTML ที่แสดงผลของคุณจะถูกจัดแนวในแนวตั้งจนถึงจุดตรวจนั้นและคุณสามารถซ่อมแซมการจัดแนวแนวตั้งต่อไปในส่วนที่เหลือของหน้าที่อยู่เคียงข้างกันได้

ในช่วงสุดสัปดาห์ฉันโพสต์โปรเจ็กต์ใหม่บน codeplex ที่ใช้อัลกอริธึมต่างของ HTML ใน C # อัลกอริทึมดั้งเดิมเขียนด้วย Ruby ฉันเข้าใจว่าคุณกำลังมองหาการใช้งาน JavaScript บางทีการมีหนึ่งใน C # พร้อมซอร์สโค้ดอาจช่วยคุณในการพอร์ตอัลกอริทึม นี่คือลิงค์ถ้าคุณมีความสนใจ: htmldiff.codeplex.com คุณสามารถอ่านเพิ่มเติมได้ที่นี่

UPDATE:ห้องสมุดนี้ได้ถูกย้ายไปGitHub

ฉันต้องการสิ่งที่คล้ายกันในขณะที่กลับมา ในการทำให้ HTML เรียงตัวกันคุณสามารถใช้สอง iFrames แต่จากนั้นคุณจะต้องเชื่อมโยงการเลื่อนเข้าด้วยกันผ่านทางจาวาสคริปต์ในขณะที่คุณเลื่อน (หากคุณอนุญาตให้เลื่อนได้)

อย่างไรก็ตามหากต้องการดูความแตกต่างคุณมักจะต้องการใช้ห้องสมุดของคนอื่นมากกว่า ฉันใช้DaisyDiffซึ่งเป็นไลบรารี Java สำหรับโปรเจ็กต์ที่คล้ายกันซึ่งลูกค้าของฉันพอใจกับการแสดงผล HTML เดียวของเนื้อหาด้วย MS Word "track changes" -like markup

HTH

พิจารณาใช้เอาต์พุตของลิงก์หรือ lynx เพื่อแสดง html ในเวอร์ชันข้อความเท่านั้นจากนั้นจึงแตกต่างออกไป

สิ่งที่เกี่ยวกับDaisyDiff (มีรุ่นJavaและPHP )

คุณสมบัติต่อไปนี้ดีมาก:

• ทำงานร่วมกับ HTML ที่มีรูปแบบไม่ถูกต้องซึ่งพบได้ "ในป่า"
• ความแตกต่างมีความเชี่ยวชาญใน HTML มากกว่าแผนภูมิ XML ที่แตกต่างกัน การเปลี่ยนส่วนของโหนดข้อความจะไม่ทำให้โหนดทั้งหมดถูกเปลี่ยน
• นอกเหนือจากความแตกต่างของภาพเริ่มต้นแล้วซอร์ส HTML ยังสามารถแตกต่างกันได้
• ให้คำอธิบายที่เข้าใจง่ายของการเปลี่ยนแปลง
• GUI เริ่มต้นช่วยให้เรียกดูการแก้ไขได้ง่ายผ่านแป้นพิมพ์ลัดและลิงก์

ดังนั้นคุณคาดหวัง

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

และ

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

จะถือว่าเหมือนกัน?

ผลลัพธ์ขึ้นอยู่กับ User Agent เป็นอย่างมาก เช่นเดียวกับที่Ionut Anghelcovici แนะนำให้สร้างภาพ ทำอย่างใดอย่างหนึ่งสำหรับทุกเบราว์เซอร์ที่คุณสนใจ

ใช้โหมดมาร์กอัปของ Pretty Diff สำหรับ HTML เขียนด้วย JavaScript ทั้งหมด

http://prettydiff.com/

ถ้าเป็น XHTML (ซึ่งถือว่าเป็นส่วนใหญ่ในส่วนของฉัน) Xml Diff Patch Toolkit จะช่วยได้หรือไม่ http://msdn.microsoft.com/en-us/library/aa302294.aspx

สำหรับความแตกต่างเล็ก ๆ น้อย ๆ คุณอาจสามารถทำ text-diff ปกติได้จากนั้นวิเคราะห์ส่วนที่ขาดหายไปหรือแทรกเพื่อดูวิธีแก้ไข แต่สำหรับความแตกต่างที่ใหญ่กว่านั้นคุณจะมีช่วงเวลาที่ยากลำบากในการทำเช่นนี้

ตัวอย่างเช่นคุณจะตรวจจับและแสดงได้อย่างไรว่ารูปภาพที่จัดชิดซ้าย (ที่ลอยอยู่ทางซ้ายของย่อหน้าของข้อความ) ได้กลายเป็นชิดขวา

การใช้ข้อความที่แตกต่างกันจะทำลายเอกสารที่ไม่สำคัญ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณคิดว่าใช้งานง่าย XML ที่แตกต่างกันอาจสร้างความแตกต่างที่ไม่ค่อยดีสำหรับข้อความที่มีมาร์กอัป AFAIK, DaisyDiffเป็นไลบรารีเดียวที่เชี่ยวชาญด้าน HTML ใช้งานได้ดีสำหรับส่วนย่อยของ HTML

หากคุณกำลังทำงานกับ Java และ XHTML XMLUnitจะช่วยให้คุณสามารถเปรียบเทียบเอกสาร XML สองเอกสารผ่านทางคลาสorg.custommonkey.xmlunit.DetailedDiff :

เปรียบเทียบและอธิบายความแตกต่างทั้งหมดระหว่างเอกสาร XML สองชุด การเปรียบเทียบเอกสารจะไม่หยุดลงเมื่อพบความแตกต่างที่ไม่สามารถกู้คืนได้ครั้งแรกซึ่งแตกต่างจากคลาส Diff

ฉันเชื่อว่าวิธีที่ดีในการทำเช่นนี้คือการแสดง HTML เป็นรูปภาพจากนั้นใช้เครื่องมือที่แตกต่างบางอย่างที่สามารถเปรียบเทียบรูปภาพเพื่อระบุความแตกต่างได้