누구든지 렌더링 된 HTML에 대한 diff 알고리즘이 있습니까? [닫은]

두 HTML 페이지의 나란히 비교를 렌더링하기 위해 Javascript에서 좋은 diff 알고리즘을 보는 데 관심이 있습니다. 아이디어는 diff가 렌더링 된 HTML 의 차이점을 보여줄 것이라는 것 입니다.

명확히하기 위해 렌더링 된 출력 으로 나란히있는 diff를 볼 수 있기를 원합니다 . 따라서 단락을 삭제하면 나란히보기에서 올바른 간격을 알 수 있습니다.

@Josh 정확히. 삭제 된 텍스트가 빨간색 등으로 표시 될 수도 있습니다. 아이디어는 HTML 콘텐츠에 WYSIWYG 편집기를 사용하는 경우 diff를 수행하기 위해 HTML로 전환 할 필요가 없다는 것입니다. 아마 두 명의 WYSIWYG 편집자와 나란히하고 싶습니다. 또는 적어도 최종 사용자에게 친숙한 문제에서 diff를 나란히 표시하십시오.

렌더링 된 HTML diff의 모양을 크게 개선하는 데 사용할 수있는 또 다른 유용한 방법이 있습니다. 이것이 초기 문제를 완전히 해결하지는 못하지만 렌더링 된 HTML diff의 모양에 상당한 차이를 만듭니다.

나란히 렌더링 된 HTML은 diff가 수직으로 정렬되는 것을 매우 어렵게 만듭니다. 수직 정렬은 나란히 비교하는 데 중요합니다. side-by-side diff의 수직 정렬을 개선하기 위해 diff가 수직으로 정렬되어야하는 "checkpoints"에 diff의 각 버전에 보이지 않는 HTML 요소를 삽입 할 수 있습니다. 그런 다음 약간의 클라이언트 측 JavaScript를 사용하여 측면이 수직으로 정렬 될 때까지 체크 포인트 주위에 수직 간격을 추가 할 수 있습니다.

좀 더 자세히 설명했습니다.

이 기술을 사용하려면 diff 알고리즘을 실행 하고 diff에 따라 병렬 버전이 일치해야하는 곳에 visibility:hidden <span>s 또는 작은 <div>s를 삽입 하십시오. 그런 다음 각 체크 포인트 (및 인접 항목)를 찾고 페이지에서 더 높은 (얕은) 체크 포인트에 수직 간격을 추가하는 JavaScript를 실행합니다. 이제 렌더링 된 HTML diff가 해당 체크 포인트까지 수직으로 정렬되고 나머지 나란히있는 페이지에서 수직 정렬을 계속 복구 할 수 있습니다.

주말에 저는 C #에서 HTML diff 알고리즘을 구현하는 codeplex에 대한 새로운 프로젝트를 게시했습니다. 원래 알고리즘은 Ruby로 작성되었습니다. 나는 당신이 자바 스크립트 구현을 찾고 있었다는 것을 알고있다. 아마도 C #에서 소스 코드를 사용하면 알고리즘을 이식하는 데 도움이 될 수있을 것이다. 관심이있는 경우 다음 링크가 있습니다. htmldiff.codeplex.com . 여기에서 자세한 내용을 읽을 수 있습니다 .

업데이트 : 이 라이브러리는 GitHub 로 이동되었습니다 .

나는 잠시 비슷한 것이 필요했습니다. HTML을 나란히 정렬하려면 두 개의 iFrame을 사용할 수 있지만 스크롤 할 때 자바 스크립트를 통해 스크롤링을 함께 묶어야합니다 (스크롤을 허용하는 경우).

그러나 차이점을 확인하려면 다른 사람의 라이브러리를 사용하고 싶을 것입니다. 필자 는 클라이언트가 MS Word "변경 내용 추적"과 같은 마크 업을 사용하여 콘텐츠의 단일 HTML 렌더링을보고 만족하는 유사한 프로젝트에 Java 라이브러리 인 DaisyDiff를 사용 했습니다 .

HTH

링크 또는 lynx의 출력을 사용하여 html의 텍스트 전용 버전을 렌더링 한 다음 비교해보십시오.

DaisyDiff 는 어떨까요 ( Java 및 PHP 버전 사용 가능).

다음 기능은 정말 좋습니다.

• "야생에서"찾을 수있는 잘못된 형식의 HTML과 함께 작동합니다.
• diffing은 XML 트리가 다른 것보다 HTML에 더 전문화되어 있습니다. 텍스트 노드의 일부를 변경해도 전체 노드가 변경되지는 않습니다.
• 기본 시각적 차이 외에도 HTML 소스를 일관되게 비교할 수 있습니다.
• 변경 사항에 대한 이해하기 쉬운 설명을 제공합니다.
• 기본 GUI를 사용하면 키보드 단축키 및 링크를 통해 수정 사항을 쉽게 찾아 볼 수 있습니다.

그래서 당신은 기대합니다

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

과

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

같은 것으로 간주됩니까?

출력은 사용자 에이전트에 따라 크게 달라집니다. Ionut Anghelcovici가 제안한 것처럼 이미지를 만드십시오. 관심있는 모든 브라우저에 대해 하나를 수행하십시오.

HTML 용 Pretty Diff의 마크 업 모드를 사용하십시오. 그것은 전적으로 JavaScript로 작성되었습니다.

http://prettydiff.com/

XHTML (내 부분에서 많은 것을 가정)이라면 Xml Diff Patch Toolkit이 도움이 될까요? http://msdn.microsoft.com/en-us/library/aa302294.aspx

작은 차이의 경우 일반 텍스트 차이를 수행 한 다음 누락되거나 삽입 된 부분을 분석하여 해결 방법을 확인할 수 있지만 큰 차이에 대해서는이 작업을 수행하는 데 매우 힘든 시간이 될 것입니다.

예를 들어, 왼쪽으로 정렬 된 이미지 (텍스트 단락의 왼쪽에 떠있는)가 갑자기 오른쪽으로 정렬되었음을 어떻게 감지하고 보여 주겠습니까?

다른 텍스트를 사용하면 중요하지 않은 문서에서 중단됩니다. 직관적이라고 생각하는 것에 따라 XML이 다르면 마크 업이있는 텍스트에 적합하지 않은 diff가 생성 될 수 있습니다. AFAIK, DaisyDiff 는 HTML에 특화된 유일한 라이브러리입니다. HTML의 하위 집합에서 잘 작동합니다.

Java 및 XHTML로 작업하는 경우 XMLUnit을 사용하면 org.custommonkey.xmlunit.DetailedDiff 클래스 를 통해 두 개의 XML 문서를 비교할 수 있습니다 .

두 XML 문서 간의 모든 차이점을 비교하고 설명합니다. Diff 클래스와 달리 복구 불가능한 첫 번째 차이점이 발견되면 문서 비교가 중지되지 않습니다.

이 작업을 수행하는 좋은 방법 은 HTML을 이미지 로 렌더링 한 다음 이미지 를 비교 하여 차이점 을 찾을 수있는 몇 가지 diff 도구 를 사용 하는 것입니다.