2010-09-27 24 views
12

lo que intento hacer es convertir un contenido de TextArea en un código html válido. Supongamos que escribe dentro de TextArea y luego presiona un botón que muestra el texto escrito dentro de un elemento. Si escribió algo así como dentro de TextArea:jQuery: Convertir contenido de TextArea en cadena html y viceversa

Hola amigos!
¿Te gusta jQuery?
¡Sí!

La cadena resultante que tiene que poner en el interior del elemento '' es:

Hi folks!<br>Do you like jQuery?<br>I do! 

Eso es debido a que la nueva línea dentro del TextArea se debe convertir a la etiqueta <br>!

Lo mismo debe acaecer si usted quiere tomar el html del elemento y ponerlo dentro del campo de entrada TextArea, por ejemplo:

Hi folks!<br>Do you like jQuery?<br>I do! 

deben convertirse en:

Hola amigos!
¿Te gusta jQuery?
¡Sí!

Entonces, ¿hay alguna manera de convertir una cadena a html-string (y viceversa) o debería escribir una función por mi cuenta?

¡Gracias de antemano!

+1

Puede marcar el código en línea con backticks '\' ' –

Respuesta

8

Bueno, no es muy difícil:

$('#element').html($('textarea').html().replace(/\n/g, "<br />")); 
+1

Bueno, me preguntaba si ya se había escrito una función de conversión jQuery, reemplazando las etiquetas por" mano "era obvio :) – iakko

+0

Eso responde una parte, pero al mover el texto de el elemento # al área de texto con nada más que nuevas líneas es I th entienda lo que el OP está buscando. – yaz

+0

Tuve que usar val() en lugar de html(), así: $ ('#_ b'). Html ($ ('#_ a'). Val(). Replace (/ \ n/g, "
")); – itsmikem

14

con el estilo apropiado en el elemento, que no es necesario para convertir cualquier cosa. Usando el CSS de espacio en blanco propiedad con un valor fijado en pre, cualquier espacio en blanco en el elemento debe aparecer exactamente como lo hace en el área de texto:

#myElement { white-space: pre; } 

Ejemplo: http://jsfiddle.net/TkpSu/

+0

gracias. Aunque es una solución simple. pero tuve que perder muchas veces para esta solución. –

+0

Detalle menor: en la mayoría de los casos '#myElement {white-space: pre-wrap; } 'probablemente sea una mejor opción para evitar el desbordamiento del contenido si los usuarios envían textos largos sin nuevas líneas. – Johannes

Cuestiones relacionadas