누구든지 렌더링 된 HTML에 대한 diff 알고리즘이 있습니까?[닫은]
https://stackoverflow.com/questions/31722
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
두 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을 사용할 수 있지만 스크롤 할 때 자바 스크립트를 통해 스크롤을 함께 묶어야합니다 (스크롤을 허용하는 경우).
그러나 차이점을 확인하려면 다른 사람의 라이브러리를 사용하고 싶을 것입니다.저는 제 고객이 만족스러워하는 유사한 프로젝트에 Java 라이브러리 인 DaisyDiff 를 사용했습니다.MS Word "변경 사항 추적"과 같은 마크 업이있는 콘텐츠의 단일 HTML 렌더링
HTH
링크 또는 lynx의 출력을 사용하여 html의 텍스트 전용 버전을 렌더링 한 다음 비교해보십시오.
그렇다면 라코 디스
및 라코 디스
동일하다고 생각하십니까?
출력은 사용자 에이전트에 따라 크게 달라집니다. Ionut Anghelcovici가 제안한 것처럼 이미지를 만드세요.관심있는 모든 브라우저에 대해 하나를 수행하십시오.
HTML에는 Pretty Diff의 마크 업 모드를 사용합니다.전적으로 JavaScript로 작성되었습니다.
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 문서 간의 차이점. 문서 비교는 멈추지 않습니다 처음으로 복구 불가능한 Diff와 달리 차이점이 발견되었습니다. 수업.
이 작업을 수행하는 좋은 방법은 HTML을 렌더링하는 것입니다.이미지에 추가 한 다음 이미지를 비교할 수있는 diff 도구 를 사용하여 차이점을 찾습니다.
