2011-12-20 15 views
7

En una aplicación en la que estoy trabajando, el usuario ingresa contenido en texto llano que luego se mostrará como HTML. Para hacer que la pantalla el contenido del usuario tan bien como sea posible, transformamos el contenido de la siguiente manera:Convirtiendo nuevas líneas a etiquetas HTML de párrafo/br, ¿puede ser una expresión regular única?

  • Cualquier bloque de texto delimitados por dos o más caracteres de nueva línea se envuelven en <p> etiquetas. Los nuevos caracteres de línea (y cualquier espacio en blanco entre ellos) se eliminan.

  • Cualquier nuevo carácter de línea nuevo (junto con el espacio en blanco circundante) se reemplaza por una etiqueta < br/>.

Actualmente estoy logrando esto colocando el texto a través de dos reemplazos de expresiones regulares, pero me preguntaba si podría consolidarse en uno. Esto es lo que tengo ahora (JavaScript):

// content holds the text to process 
content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>') 
       .replace(/\n/g, '<br />') + '</p>'; 
+0

Simplemente curioso, ¿está usando algún tipo de editor de html/javascript como TinyMCE o YUI? ¿O solo un elemento forma/textarea? – Dave

+0

Simplemente un área de texto de forma antigua simple –

+0

hola, ¿fue capaz de resolverlo? – Sisir

Respuesta

9

Hay dos cadenas de reemplazo diferentes. Por lo tanto, es imposible hacerlo en una sola llamada de reemplazo.

Pero la segunda sustitución() se puede cambiar por una sustitución más eficaz de la secuencia normal.

content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>') 
       .replace('\n', '<br />') + '</p>'; 

Por lo tanto, hay solo expresiones regulares. :)

actualización

Javascript me engañó. La cadena replace maneja solo la primera aparición.

Ver How to replace all occurrences of a string in JavaScript?

También se dan varias implementaciones posibles de solución de replaceAll.

+1

El problema con esta solución es que la segunda llamada de reemplazo solo reemplaza la primera coincidencia y no todas las coincidencias. Necesita '.replace (/ \ n/g, '
')' para capturar * todas las * nuevas líneas restantes. –

+0

Me encuentro corregido. Gracias. Actualizado la respuesta. – Vadzim

1

Me enfrentaba a un requisito similar: imitar la funcionalidad wpautop en javascript (para usar en el personalizador de temas).

Así que aquí es mi enfoque del problema:

En primer lugar, vuelva a colocar el caso cuando hay dos saltos de línea.

to = to.replace(/\n{2}/g, '&nbsp;</p><p>'); 

Luego, reemplace la carcasa cuando solo quede un salto de línea.

to = to.replace(/\n/g, '&nbsp;<br />'); 

Y por último envolver todo el contenido de una etiqueta <p>

to = '<p>' + to + '</p>'; 

he utilizado la & nbsp; porque mi estilo implicaba margen después del párrafo. Puedes omitirlos si no los necesitas. Además, un inconveniente es que los saltos de línea individuales se insertan al principio del siguiente párrafo, pero esto es algo con lo que puedo vivir.

Cuestiones relacionadas