¿Hay una biblioteca JS diff contra htmlstring al igual que google-diff-match-patch en texto plano?

Actualmente estoy usando google-diff-match-patch para implementar una herramienta de edición en tiempo real, que puede sincronizar textos entre múltiples usuarios. Todo funciona muy bien cuando las operaciones son solo textos sin formato, las operaciones de cada usuario (agregar / eliminar textos) se pueden modificar comparando con una instantánea de texto antiguo con el asistente de google-diff. Pero cuando se trata de textos de formato enriquecido (como negrita / cursiva), google-diff no funciona bien al comparar htmlstring. La aparición de caracteres de arruinó los resultados de las diferencias, especialmente cuando el formato negrita / cursiva está incrustado entre sí.

¿Alguien podría sugerir una biblioteca similar como google-diff a diff htmlstrings? O cualquier sugerencia puede solucionar mi problema con google-diff? Entendí que google-diff está diseñado para texto sin formato, pero en realidad no encontré una biblioteca mejor que hasta ahora, por lo que también funciona si una mejora factible a google-diff puede ayudar.

La wiki en el proyecto google-diff-match-patch comparte algunas ideas. Desde http://code.google.com/p/google-diff-match-patch/wiki/Plaintext :

Un método es quitar las tags del HTML usando un regex simple o un andador de nodos. A continuación, difiera el contenido HTML del contenido de texto. No realice ninguna limpieza de diferencias. Este diff permite mapear posiciones de personaje de una versión a la otra (ver la función diff_xIndex). Después de esto, uno puede aplicar todos los parches que uno quiera contra el texto simple, luego mapear los cambios de manera segura al HTML. El truco de esta técnica es que, aunque el texto puede editarse libremente, las tags HTML son inmutables.

Otro método es recorrer el HTML y reemplazar cada etiqueta de apertura y cierre con un carácter Unicode. Verifique las especificaciones Unicode para un rango que no está en uso. Durante el proceso, cree una tabla hash de caracteres Unicode en las tags originales. El resultado es un bloque de texto que puede parchearse sin temor a insertar texto dentro de una etiqueta o romper la syntax de una etiqueta. Uno solo tiene que tener cuidado al reconvertir el contenido a HTML para que no se pierdan las tags de cierre.

Tengo la corazonada de que la segunda idea, map-HTML-tags-to-Unicode-placeholders, podría funcionar mejor de lo que uno podría adivinar … especialmente si tus tags HTML son de un conjunto reducido, y si puedes realizar un poco retoque de apertura / cierre cuando se muestra el marcado de intercalado (tachado / subrayado).

Otro método que podría funcionar con un estilo simple sería eliminar las tags HTML, pero recuerde los índices de caracteres afectados. Por ejemplo, “las posiciones 8-15 están en negrita”. Luego, realice un diff de texto claro. Finalmente, utilizando la idea de mapeo de posición diff_xIndex del primer método de la wiki, reinscriba inteligentemente las tags HTML para volver a aplicar estilos a los rangos que sobreviven / agregan. (Es decir, si las posiciones anteriores 8-13 sobrevivieron, pero se movieron a 20-25, inserte las tags B por allí).

jsdifflib: una herramienta y una biblioteca de JavaScript diff visuales https://github.com/cemerick/jsdifflib

Hay una demostración aquí: http://cemerick.github.io/jsdifflib/demo.html

Pretty Diff hace todo lo que necesita, excepto que necesitará actualizar la respuesta DOM para que el diff se dispare contra el evento “onkeyup” en lugar de presionar el botón.

http://prettydiff.com/

Echa un vistazo a SynchroEdit , podría ser útil.