Limpieza HTML mediante JavaScript

Question

En una aplicación que estoy desarrollando, el usuario ingresa HTML en un cuadro de texto para editar un elemento en su página. En esta etapa, el usuario puede agregar cualquier tipo de contenido, incluso HTML roto, y algunos nodos de texto.

Para asegurarse de que obtener el código un poco limpio, hago esto

var s = document.createElement('div'); 
s.innerHTML = content; 
// loop over each node in s, and if text node is found, wrap in span. 
content = s.innerHTML 

El problema con este fragmento es que es el contenido era un <TD>Text</TD>, el resultado que se ve es Text, ya que no puede ser un TD en un DIV.

¿Existe una solución para obtener contenido válido, en todos los casos?

Answer 1

La mejor solución sería pasar su cadena de HTML a una página de servidor que ejecuta HTML Tidy que luego devolvería la versión 'limpia'. No tengo conocimiento de ninguna solución sólida, solo para el lado del cliente, me temo.

EDIT: una solución barata es utilizar el propio DOM, o incluso más rápido con jQuery:

var input='<div><td>foo</td>'; 
var output = $('<div>'+html+'</div>').html(); //=> '<div>foo</div>' 

Esto no va a limpiar todos los errores, pero podría ser suficiente para usted.

Answer 2

El problema al hacerlo usando el DOM es que realmente no desea html totalmente corregido, porque está agregando la condición de que el html puede ser un fragmento. Desea corregir algunos html corregidos y otros no.

googlear un poco vomitó este plugin jQuery: http://www.davidpirek.com/blog/html-beautifier-jquery-plugin

pero no puedo dar fe de ello.

Probablemente estaría de acuerdo con Graham y sugiero HTML Tidy ya que es maduro y rápido, incluso si tiene que esperar la respuesta.