jQuery texto() llamada conserva saltos de línea en Firefox pero no en IE

Question

estoy haciendo:

alert($("#div").text()); 

en algo como esto:

<div id="div"> 
&lt;div&gt; 
Some text 
&lt;div&gt; 
</div> 

Por qué el contenido escapado? Porque a veces está mal formado y no quiero que interfiera o rompa el resto del documento.

En FF aparece la preservación de nuevas líneas. En IE7 no. Necesito preservar el espacio en blanco. Este contenido en realidad está yendo en un área de texto para su edición.

Y antes de que nadie recomiende un editor de texto enriquecido, este código no es realmente HTML. Es un dialecto personalizado.

Entonces, ¿cómo puedo mantener las líneas nuevas en IE?

Answer 1

Parece que este es mi problema: The Internet Explorer innerHTML Quirk:

Sin embargo, innerHtml tiene un problema en Internet Explorer.

El estándar HTML requiere una transformación al mostrar el contenido. Todos los tipos y cantidades adyacentes de espacios en blanco se colapsaron en un solo espacio . Esto es una buena cosa - al igual que un ejemplo, me permite agregar un lote de de saltos de línea en este archivo fuente sin tener que preocuparse por extraños saltos de línea en el texto mostrado.

Internet Explorer aplica estas transformaciones en la asignación a la propiedad innerHTML . Esto parece una buena idea : ahorra un poco de tiempo durante la visualización, ya que si el representación en memoria ya está normalizado, a continuación, el navegador no tiene para normalizar cada vez que necesita pantalla el texto. Sin embargo, existen excepciones a la regla de normalización . En particular, estos son < textarea> element, < pre> elemento y, en navegadores compatibles con CSS , elementos con cualquier valor pero normal para la propiedad de espacio en blanco.

Internet Explorer no respeta estos casos especiales. El tercero hace que su optimización sea una mala idea, porque el espacio en blanco podría cambiar en tiempo de ejecución, , por ejemplo, a través del DOM. En cualquier caso , Internet Explorer normalizará todas las asignaciones a la propiedad innerHTML , causando el efecto que se muestra a continuación.

Este texto rellena el área de texto en la página carga. Esto también contiene saltos de línea y espacios múltiples. El formato es conservado aquí también, excepto que el UA puede romper líneas.

(énfasis añadido)

Y de hecho, si lo cambio a:

<div id="div"> 
<pre> 
... 
</pre> 
</div> 

y

$("#div pre").text() 

o simplemente:

<style type="text/css"> 
#div { white-space: pre } 
</style> 

todo funciona mágicamente.

Answer 2

No estoy seguro si esto ayudaría, pero tal vez usted podría intentar esto:

#div { 
    white-space: pre; 
} 

Answer 3

Ver here para una solución:

El truco es clonar primero el elemento desea que los contenidos de, utilizando cloneNode().

A continuación, crear un elemento <pre> con createElement(), y luego anexar su nodo clonado a ella.

Ahora puede obtener el texto interno de ese crear el elemento <pre> y simplemente eliminar los objetos temporales. Ahora tiene espacios en blanco de texto conservado :)

var cloned = targetElement.cloneNode(true); 
var pre = document.createElement("pre"); 
pre.appendChild(cloned); 
var textContent = pre.textContent ? 
    pre.textContent : pre.innerText; 
delete pre; 
delete cloned; 

La razón por la que clonar el elemento es porque el appendChild() se retiraría fuera del DOM y es el dolor del vuelva a insertar hacia atrás en la posición correcta en el DOM.

Esperemos que esto ayuda a algunas personas por ahí :)