2011-12-20 8 views
7

Un'applicazione a cui sto lavorando ha l'utente inserito contenuto in testo in chiaro che verrà successivamente visualizzato come HTML. Per rendere visualizzazione del contenuto dell'utente come bene come possibile, trasformiamo il contenuto come segue:Conversione di nuove righe in paragrafo/tag HTML, può essere una singola espressione regolare?

  • eventuali blocchi di testo delimitati da due o più caratteri di nuova riga sono avvolti in <p> tag. I caratteri della nuova riga (e gli eventuali spazi in mezzo) vengono eliminati.

  • Qualsiasi singolo carattere di nuova riga (insieme agli spazi bianchi circostanti) viene sostituito da un tag br/>.

Attualmente sto ottenendo questo mettendo il testo attraverso due regex sostituzioni, ma mi chiedevo se potesse essere consolidato a uno. Ecco cosa ho adesso (JavaScript):

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

Solo curioso, stai usando qualsiasi tipo di editor html/javascript come TinyMCE o YUI? O solo un elemento form/textarea? – Dave

+0

Solo una semplice area di testo del vecchio modulo –

+0

ciao, sei riuscito a risolverlo? – Sisir

risposta

9

Ci sono due diverse stringhe di sostituzione. Quindi è impossibile farlo in una singola chiamata sostitutiva.

Ma la seconda sostituzione() può essere sostituita con una sostituzione di stringa semplice più efficace.

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

Quindi, c'è una singola espressione regolare. :)

Aggiornamento

Javascript me bluffato. La stringa replace gestisce solo la prima occorrenza.

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

Ci sono anche dato diverse possibili implementazioni soluzione alternativa di replaceAll.

+1

Il problema con questa soluzione è che la seconda chiamata sostitutiva sostituisce solo la prima corrispondenza e non tutte le corrispondenze. È necessario '.replace (/ \ n/g, '
')' per catturare * tutte * le nuove righe rimanenti. –

+0

Sono stato corretto. Grazie. Aggiornata la risposta. – Vadzim

1

Mi trovavo di fronte a un requisito simile: imitare la funzionalità wpautop in javascript (da utilizzare nel customizer del tema).

Così qui è il mio approccio al problema:

In primo luogo, sostituire il caso quando ci sono due interruzioni di riga.

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

Quindi, sostituire la custodia quando rimangono solo una linea interrotta.

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

E infine avvolgere l'intero contenuto in una <p> tag

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

ho usato il & nbsp; perché il mio stile implicava margini dopo il paragrafo. Puoi ometterli se non ne hai bisogno. Inoltre, uno svantaggio è che le interruzioni di riga singola sono inserite all'inizio del paragrafo successivo, ma questo è qualcosa che posso convivere con questo.

Problemi correlati